सभी jQuery के अजाक्स अनुरोध किए जाने तक प्रतीक्षा करें?

Question

जब तक सभी jQuery Ajax अनुरोधों को किसी अन्य फ़ंक्शन के अंदर नहीं किया जाता है, तब तक मैं एक फ़ंक्शन प्रतीक्षा कैसे करूं?

संक्षेप में, मुझे अगले निष्पादित होने से पहले सभी अजाक्स अनुरोधों की प्रतीक्षा करने की आवश्यकता है। पर कैसे?

Comments

आप अपने मूल AJAX अनुरोधों को कैसे कह रहे हैं?

— नेकेडब्रंच

"किया" से आपका क्या मतलब है? मैं इसे "सभी अनुरोध या तो सफलतापूर्वक समाप्त हो गया है या नहीं" के रूप में समझता हूं (हल या अस्वीकृत)। लेकिन आपका मतलब हो सकता है "सभी अनुरोध सफलतापूर्वक समाप्त हो गए हैं" (हल)। api.jquery.com/category/deferred-object

— Adrien Be

Answer 1

jQuery अब इस उद्देश्य के लिए एक फ़ंक्शन को परिभाषित करता है ।

यह आस्थगित वस्तुओं की किसी भी संख्या को तर्क के रूप में स्वीकार करता है, और सभी को हल करने पर एक फ़ंक्शन निष्पादित करता है।

इसका मतलब है, यदि आप चार ajax अनुरोधों को शुरू करना चाहते हैं (उदाहरण के लिए), तो जब वे कर रहे हों तो एक क्रिया करें, आप कुछ इस तरह से कर सकते हैं:

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four ajax requests resolve.
    // a1, a2, a3 and a4 are lists of length 3 containing the response text,
    // status, and jqXHR object for each of the four ajax calls respectively.
});

function ajax1() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

मेरी राय में, यह एक साफ और स्पष्ट वाक्यविन्यास के लिए बनाता है, और किसी भी वैश्विक चर जैसे ajaxStart और ajaxStop को शामिल करने से बचता है, जिससे आपके पृष्ठ के विकसित होने पर अवांछित दुष्प्रभाव हो सकते हैं।

यदि आप पहले से नहीं जानते हैं कि आपको कितने ajax तर्कों की प्रतीक्षा करने की आवश्यकता है (यानी आप एक तर्क संख्या का उपयोग करना चाहते हैं), यह अभी भी किया जा सकता है, लेकिन बस थोड़ा सा मुश्किल है। $ .When () और (शायद jQuery के साथ तर्क के चर संख्या के साथ समस्या निवारण ) के संदर्भ में देखें ।

यदि आपको ajax लिपियों आदि की विफलता मोड पर गहरे नियंत्रण की आवश्यकता है, तो आप लौटाए गए ऑब्जेक्ट को सहेज सकते हैं .when()- यह एक jQuery का वादा ऑब्जेक्ट है, जिसमें सभी मूल ajax क्वेरीज़ शामिल हैं। आप विस्तृत सफलता / विफलता संचालकों को जोड़ने के लिए उस पर कॉल .then()या कर सकते हैं .fail()।

Comments

इसे एक सही उत्तर के रूप में चिह्नित किया जाना चाहिए क्योंकि यह सरल, कुशल और बढ़िया काम करता है। इसके अलावा, यह ध्यान दिया जाना चाहिए कि $.whenएक रिटर्न Promiseवस्तु जो अधिक उपयोगी तरीकों, न केवल है .done। उदाहरण के लिए, .then(onSuccess, onFailure)विधि के साथ आप प्रतिक्रिया कर सकते हैं जब दोनों अनुरोध सफल होते हैं या उनमें से कम से कम एक विफल हो जाता है।

— रात्रि

क्या अनुरोध ajax1..4 को एक सरणी में बाँधना और पास करना संभव है?

— andig

failमामले से सावधान रहें । इसके विपरीत done, failपहली असफलता पर तुरंत आग लग जाती है और शेष आस्थगितों की अवहेलना होती है।

— रायन मोहर

@skalee इस तथ्य को उजागर करने के लिए धन्यवाद कि एक onFailureफ़ंक्शन संलग्न किया जा सकता है। जैसा कि मैंने ओपी के प्रश्न के लिए एक टिप्पणी में कहा था: वह और अधिक सटीक रूप से इंगित करना चाह सकता है कि उसका अर्थ "किया" था। "रयान मोहर" ने इस तथ्य के बारे में एक बहुत अच्छी बात कही कि यह failअलग तरह से व्यवहार करता है done, इसके बारे में कुछ और पढ़ने के लिए Promisesमुझे लगता है कि मुझे html5rocks.com/en/tutorials/es6/promises

— बी

लोगों को कब किस तरीके से एक्सपोज़र दिया जाए, और सामान्य रूप से वादे करना बहुत अच्छा है, लेकिन मुझे लगता है कि यह सबसे अच्छा जवाब नहीं है। यदि उन ajax में से कोई भी कार्य कहीं भी रेखा के नीचे एक और ajax अनुरोध बनाता है, और फिर उस नए वादे को श्रृंखला में सही ढंग से एकीकृत नहीं करता है ... तो वे अनुरोध इस तकनीक से बच जाएंगे। उदाहरण के लिए, मैं इस तकनीक का उपयोग बिना शॉपिफ़ाइज़ लाइब्रेरी को संशोधित किए बिना नहीं कर सकता हूँ जिसका उपयोग मैं अजाक्स ऐड-टू-कार्ट व्यवहार के लिए कर रहा हूँ, क्योंकि यह 'प्रॉमिस' तरीके से नहीं लिखा गया था, और इसे बनाने वाली xhr ऑब्जेक्ट्स को कभी नहीं लौटाता है। इसका कोई मतलब भी है क्या? अभी भी एक महान जवाब है, हालांकि!

— जिग्गी

Answer 2

यदि आप जानना चाहते हैं कि आपके दस्तावेज़ में सभी ajax अनुरोध समाप्त हो गए हैं, तो उनमें से कोई भी मौजूद नहीं है, बस $ .ajaxStop इवेंट का उपयोग इस तरह से करें:

$(document).ajaxStop(function () {
  // 0 === $.active
});

इस मामले में, न तो आपको यह अनुमान लगाने की आवश्यकता है कि आवेदन में कितने अनुरोध हो रहे हैं, जो भविष्य में समाप्त हो सकते हैं, और न ही फ़ंक्शन जटिल तर्क में खो सकते हैं या यह पता कर सकते हैं कि कौन से कार्य HTTP(S)अनुरोध कर रहे हैं।

$.ajaxStopयहां HTMLआपको किसी भी नोड के लिए बाध्य किया जा सकता है जो आपको लगता है कि आवश्यक रूप से संशोधित किया जा सकता है।

---

अद्यतन:
यदि आप ESवाक्य रचना के साथ रहना चाहते हैं , तो आप ज्ञात विधियों के लिए Promise.all का उपयोग कर सकते हैं ajax:

Promise.all([ajax1(), ajax2()]).then(() => {
  // all requests finished successfully
}).catch(() => {
  // all requests finished but one or more failed
})

यहां एक दिलचस्प बात यह है कि यह अनुरोध Promisesऔर $.ajaxअनुरोध दोनों के साथ काम करता है ।

यहाँ jsFiddle प्रदर्शन है।

---

अद्यतन 2:
अभी भी अधिक हाल के संस्करण का उपयोग कर async / प्रतीक्षा सिंटैक्स:

try {
  const results = await Promise.all([ajax1(), ajax2()])
  // do other actions
} catch(ex) { }

Comments

+1 आपको कॉलबैक / क्लोजर के साथ 3 पार्टी स्क्रिप्ट से निपटने के मामले में अन्य उत्तरों की तुलना में बेहतर है ।

— कैसर

@kaiser मान्य बिंदु लेकिन यह वह नहीं है जो सवाल पूछ रहा था। यह बहुत अच्छा नहीं है अगर आप सभी AJAX कॉल के लौटने का इंतजार नहीं करना चाहते हैं। यह सवाल आपके द्वारा किए गए AJAX कॉल की प्रतीक्षा करने के बारे में विशिष्ट है (जिसे किसी अन्य फ़ंक्शन के अंदर कहा जाता है, जैसा कि ओपी ने लिखा है)। कुछ अन्य कोड ने एक और AJAX कॉल किया है जिसका आप इंतजार नहीं करना चाहते हैं।

— जुआन मेंडेस

कब () समाधान की तुलना में, यह काम करने का लाभ है भले ही अजाक्स कॉल की संख्या ज्ञात नहीं है।

— एलेक्सिस डुफ्रेनॉय

कब () समाधान की तुलना में, इसका बड़ा नुकसान यह है कि यह अन्य घटकों के साथ मिलकर काम नहीं करता है, क्योंकि यह एक दस्तावेज़-व्यापी वैश्विक स्थिति साझा करता है। अगर लगातार कुछ लंबा मतदान हो रहा है, तो शायद कभी आग न लगे।

— बरगी

आप सही नहीं हैं @ AdrienBe, ajaxStop सभी ajax अनुरोधों को संभालता है, चाहे वे सफल हों या न हों, जैसे मेरे शब्दों के प्रमाण इस jsfiddle.net/36votxba/2 पर देखें

— Arsen Khachatanan

Answer 3

मैं एक पाया अच्छा जवाब द्वारा gnarf जो वास्तव में मेरे स्वयं के लिए मैं क्या देख रहा था :)

jQuery ajaxQueue

//This handles the queues    
(function($) {

  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {

    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {

      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);

        next();
      };

      $.ajax(ajaxOpts);
    });
  };

})(jQuery);

फिर आप कतार में इस तरह से ajax अनुरोध जोड़ सकते हैं:

$.ajaxQueue({
        url: 'page.php',
        data: {id: 1},
        type: 'POST',
        success: function(data) {
            $('#status').html(data);
        }
    });

Comments

ऐसा लगता है कि आप इस उत्तर के लिए उचित अटेंशन देना भूल गए हैं , मैंने इसे जोड़ा है।

— टिम पोस्ट

Answer 4

ajaxStopघटना का उपयोग करें ।

उदाहरण के लिए, मान लें कि आपके पास एक लोडिंग है ... 100 ajax अनुरोध प्राप्त करते समय संदेश और आप उस संदेश को एक बार लोड करने के बाद छुपाना चाहते हैं।

JQuery के डॉक्टर से :

$("#loading").ajaxStop(function() {
  $(this).hide();
});

ध्यान दें कि यह उस पृष्ठ पर किए जा रहे सभी ajax अनुरोधों की प्रतीक्षा करेगा।

Comments

यह मानता है कि आप जानते हैं कि पेज पर कोई अन्य AJAX अनुरोध नहीं होगा, बहुत अच्छी धारणा नहीं है

— जुआन मेंडेस

JQuery 1.8 के रूप में, .ajaxStop () विधि केवल दस्तावेज़ से जुड़ी होनी चाहिए।

— जिओमोरिलो

अगर मैं गलत हूं तो मुझे सुधारें लेकिन क्या यह आपके प्रोजेक्ट को "पुराने स्कूल वेब फॉर्म" साइट में नहीं बदल देगा? मेरा मतलब है कि यदि आप अपने पूरे पृष्ठ को अनुरोध के लिए प्रतीक्षा कर सकते हैं तो इससे पहले कि यह जारी रह सकता है तो पहली बार में ajax अनुरोध का क्या मतलब है?

— बिलरुहल

@BillRuhl हमारे मामले में, मैं नया सामान बनाने के लिए एक jquery संग्रह के माध्यम से पाशन कर रहा हूं और कुछ लेआउट समायोजन करने से पहले, जब यह किया जाता है, तो पूरे संग्रह के बारे में जानना आवश्यक है। एक विशेष रूप से असामान्य मामला नहीं लगता है। बुरा होगा यदि अन्य अजाक्स सामान का एक गुच्छा प्रक्रिया में हो सकता है, लेकिन यह यहां नहीं होगा।

— इयोन

Answer 5

नोट: उपरोक्त उत्तर उस कार्यक्षमता का उपयोग करते हैं जो उस समय मौजूद नहीं था जब यह उत्तर लिखा गया था। मैं उपयोग करने की सलाह देता हूंjQuery.when() इन दृष्टिकोणों के बजाय करने की , लेकिन मैं ऐतिहासिक उद्देश्यों के लिए उत्तर छोड़ रहा हूं।

-

आप शायद एक साधारण गिनती के सेमाफोर से प्राप्त कर सकते हैं, हालांकि आप इसे कैसे लागू करते हैं यह आपके कोड पर निर्भर करेगा। एक सरल उदाहरण कुछ इस तरह होगा ...

var semaphore  = 0,     // counting semaphore for ajax requests
    all_queued = false; // bool indicator to account for instances where the first request might finish before the second even starts

semaphore++;
$.get('ajax/test1.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test2.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test3.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test4.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

// now that all ajax requests are queued up, switch the bool to indicate it
all_queued = true;

यदि आप चाहते थे कि यह {async: false} की तरह संचालित हो, लेकिन आप ब्राउज़र को लॉक नहीं करना चाहते थे, तो आप एक ही चीज़ को jQuery कतार के साथ पूरा कर सकते थे।

var $queue = $("<div/>");
$queue.queue(function(){
    $.get('ajax/test1.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test2.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test3.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test4.html', function(data) {
        $queue.dequeue();
    });
});

Comments

ऐसा लगता है कि यह एक तुच्छ समस्या को जटिल बना देगा।

— क्रिस

यह वास्तव में जटिल नहीं है। CS में गिनती के सेमाफोर एक सामान्य तंत्र हैं। यदि आप हालांकि पसंद करते हैं, तो jQuery कतारों का उपयोग करने वाला उदाहरण स्वयं को लागू करने के बिना काम करेगा।

— BBonifield

मुझे सेमाफोर काउंटर के साथ कोई समस्या नहीं दिखती है, हालांकि, परिणामस्वरूप कॉलबैक को संभालने के लिए चार कार्यों के विचार के साथ मुझे एक समस्या दिखाई देती है। आपको पहले किसी फ़ंक्शन को परिभाषित करना चाहिए, फिर प्रत्येक में उस फ़ंक्शन को संदर्भित करना चाहिए .get()। इस तरह से कम से कम आप उस कोड की नकल नहीं करते हैं। इतना ही नहीं बल्कि function(){}हर बार घोषित करने से हर बार मेमोरी आवंटित होती है! यदि आप एक सांख्यिकीय रूप से परिभाषित फ़ंक्शन कह सकते हैं, तो बुरा अभ्यास करें।

— एलेक्सिस विलके

@AlexisWilke यह एक 4.5 वर्ष पुराना उत्तर है, और यह एक उदाहरण था कि यह कैसे semaphores और queues काम करता है। आप इस बारे में बहुत कठिन सोच रहे हैं, और मुझे नहीं लगता कि एक बिंदु बनाने के लिए कैपिटलाइज़ेशन आवश्यक है।

— बीबोनिफिल्ड

खैर ... मैं वह नहीं हूं जिसने आपको -1 दिया है ... और मैं समझता हूं कि जवाब उम्र की ओर करते हैं। फिर भी, लोग उन्हें ढूंढते रहते हैं और जहाँ तक मुझे पता है कि ऐसे लोगों को जानकारी देना मना नहीं है जो संभवतः आज भी उनका उपयोग करेंगे।

— एलेक्सिस विलके

Answer 6

जावास्क्रिप्ट ईवेंट-आधारित है, इसलिए आपको कभी भी इंतजार नहीं करना चाहिए , बल्कि हुक / कॉलबैक सेट करना चाहिए

आप शायद jquery.ajax की सफलता / पूर्ण विधियों का उपयोग कर सकते हैं

या फिर आप इस्तेमाल कर सकते हैं .ajaxComplete :

$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxComplete handler.');
    //and you can do whatever other processing here, including calling another function...
  }
});

हालांकि आप कैसे (ओं) ajax अनुरोध (ओं) (अधिक) कहा जाता है की एक छद्म पोस्ट करने के लिए और अधिक सटीक होना चाहिए ...

Answer 7

थोड़ा वर्कअराउंड कुछ इस तरह है:

// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
    counter++;
    if( counter >= ajaxCalls ) {
            // When all ajax calls has been done
        // Do something like hide waiting images, or any else function call
        $('*').css('cursor', 'auto');
    }
};

var loadPersons = function() {
        // Show waiting image, or something else
    $('*').css('cursor', 'wait');

    var url = global.ctx + '/loadPersons';
    $.getJSON(url, function(data) {
            // Fun things
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCountries = function() {
    // Do things
    var url = global.ctx + '/loadCountries';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCities = function() {
    // Do things
    var url = global.ctx + '/loadCities';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

$(document).ready(function(){
    loadPersons();
    loadCountries();
    loadCities();
});

आशा है कि उपयोगी हो सकता है ...

Comments

जबकि अन्य उत्तर तकनीकी रूप से बेहतर हैं क्योंकि यह समझने में आसान है, मुझे वास्तव में यह पसंद है। अच्छा!

— जेई

Answer 8

jQuery आपको यह निर्दिष्ट करने की अनुमति देता है कि क्या आप ajax अनुरोध को अतुल्यकालिक चाहते हैं या नहीं। आप बस ajax अनुरोधों को तुल्यकालिक बना सकते हैं और फिर शेष कोड तब तक निष्पादित नहीं करेंगे जब तक वे वापस नहीं आते।

उदाहरण के लिए:

jQuery.ajax({ 
    async: false,
    //code
});

Comments

ध्यान देने वाली एक बात यह है कि {async: false} का उपयोग करने से ब्राउज़र अस्थायी रूप से लॉक हो सकता है। api.jquery.com/jQuery.ajax

— BBONifield

यह मानक jQuery / जावास्क्रिप्ट अभ्यास के विपरीत चलता है। AJAX को हमेशा एसिंक्रोनस माना जाता है। आपको इसके बजाय jQuery.when () का उपयोग करना चाहिए।

— SystemParadox

यह बहुत बुरा विचार है! कभी ऐसा मत करो! अवरुद्ध करना = स्क्रॉल करने या कुछ भी करने के लिए उपयोगकर्ता की कार्रवाइयों पर प्रतिक्रिया नहीं देना! (इसके अलावा, async: झूठी jQuery 1.8 में पदावनत होने जा रहा है।)

— skalee

विशेष रूप से यदि अनुरोध विफल हो जाता है या किसी अप्रत्याशित कारण के लिए एक लंबा समय लगता है (जो, मर्फी के नियम से, ऐसा होने के लिए बाध्य है!), यह आमतौर पर ब्राउज़र के कारण उत्पादन कोड के लिए एक बुरा विचार है जैसा कि ऊपर कहा गया है।

— एलेक्स

यह एक बहुत बुरा विचार है। इस उपयोगकर्ता का उपयोग न करें।

— टॉरेन

Answer 9

अगर आपको कुछ सरल चाहिए; एक बार और कॉलबैक किया

        //multiple ajax calls above
        var callback = function () {
            if ($.active !== 0) {
                setTimeout(callback, '500');
                return;
            }
            //whatever you need to do here
            //...
        };
        callback();

Comments

यह एक अंतहीन लूप उत्पन्न कर सकता है!

— डिएगो फेवरो

यह एक अंतहीन लूप है? कब? जब AJAX कभी नहीं लौटता है?

— जोनाथन

Answer 10

इसके अलावा आप async.js का उपयोग कर सकते हैं ।

मुझे लगता है कि यह $ से बेहतर है। क्योंकि आप सभी प्रकार के अतुल्यकालिक कॉल को मर्ज कर सकते हैं जो समय-समय पर बॉक्स से बाहर वादों, सकलाइट कॉल आदि का समर्थन नहीं करता है और न ही अजाक्स अनुरोध करता है।

Answer 11

@Bonifield के उत्तर के आधार पर, मैंने एक उपयोगिता फ़ंक्शन लिखा, ताकि सभी अजाक्स कॉल में सेमाफोर तर्क न फैले।

untilAjax उपयोगिता कार्य है जो सभी ajaxCalls पूरा होने पर एक कॉलबैक फ़ंक्शन को आमंत्रित करता है।

ajaxObjsअजाक्स सेटिंग ऑब्जेक्ट्स की एक सरणी है [http://api.jquery.com/jQuery.ajax/]।

fn कॉलबैक फ़ंक्शन है

function untilAjax(ajaxObjs, fn) {
  if (!ajaxObjs || !fn) {
    return;
  }
  var ajaxCount = ajaxObjs.length,
    succ = null;

  for (var i = 0; i < ajaxObjs.length; i++) { //append logic to invoke callback function once all the ajax calls are completed, in success handler.
    succ = ajaxObjs[i]['success'];
    ajaxObjs[i]['success'] = function(data) { //modified success handler
      if (succ) {
        succ(data);
      }
      ajaxCount--;
      if (ajaxCount == 0) {
        fn(); //modify statement suitably if you want 'this' keyword to refer to another object
      }
    };
    $.ajax(ajaxObjs[i]); //make ajax call
    succ = null;
  };

उदाहरण: doSomethingफ़ंक्शन का उपयोग करता है untilAjax।

function doSomething() {
  // variable declarations
  untilAjax([{
    url: 'url2',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url1',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url2',
    dataType: 'json',
    success: function(response) {
      //do something with success data
    }
  }], function() {
    // logic after all the calls are completed.
  });
}

Answer 12

यदि आप खरोंच से शुरू कर रहे हैं तो मैं $ .when () का उपयोग करने की अत्यधिक सलाह देता हूं ।

भले ही इस सवाल के दस लाख से अधिक उत्तर हैं, फिर भी मुझे अपने मामले के लिए कुछ भी उपयोगी नहीं लगा। मान लीजिए कि आपको एक मौजूदा कोडबेस से निपटना है, जो पहले से ही कुछ अजाक्स कॉल कर रहा है और वादों की जटिलता और / या पूरी चीज को फिर से लाना नहीं चाहता है।

हम आसानी से jQuery का लाभ ले सकते हैं .data, .onऔर.trigger कार्य जो हमेशा से jQuery का हिस्सा रहे हैं।

Codepen

मेरे समाधान के बारे में अच्छी बात यह है:

• यह स्पष्ट है कि कॉलबैक वास्तव में किस पर निर्भर करता है

• फ़ंक्शन triggerNowOrOnLoadedको परवाह नहीं है कि क्या डेटा पहले से लोड किया गया है या हम अभी भी इसके लिए इंतजार कर रहे हैं

• मौजूदा कोड में इसे प्लग करना आसान है

$(function() {

  // wait for posts to be loaded
  triggerNowOrOnLoaded("posts", function() {
    var $body = $("body");
    var posts = $body.data("posts");

    $body.append("<div>Posts: " + posts.length + "</div>");
  });


  // some ajax requests
  $.getJSON("https://jsonplaceholder.typicode.com/posts", function(data) {
    $("body").data("posts", data).trigger("posts");
  });

  // doesn't matter if the `triggerNowOrOnLoaded` is called after or before the actual requests 
  $.getJSON("https://jsonplaceholder.typicode.com/users", function(data) {
    $("body").data("users", data).trigger("users");
  });


  // wait for both types
  triggerNowOrOnLoaded(["posts", "users"], function() {
    var $body = $("body");
    var posts = $body.data("posts");
    var users = $body.data("users");

    $body.append("<div>Posts: " + posts.length + " and Users: " + users.length + "</div>");
  });

  // works even if everything has already loaded!
  setTimeout(function() {

    // triggers immediately since users have been already loaded
    triggerNowOrOnLoaded("users", function() {
      var $body = $("body");
      var users = $body.data("users");

      $body.append("<div>Delayed Users: " + users.length + "</div>");
    });

  }, 2000); // 2 seconds

});

// helper function
function triggerNowOrOnLoaded(types, callback) {
  types = $.isArray(types) ? types : [types];

  var $body = $("body");

  var waitForTypes = [];
  $.each(types, function(i, type) {

    if (typeof $body.data(type) === 'undefined') {
      waitForTypes.push(type);
    }
  });

  var isDataReady = waitForTypes.length === 0;
  if (isDataReady) {
    callback();
    return;
  }

  // wait for the last type and run this function again for the rest of the types
  var waitFor = waitForTypes.pop();
  $body.on(waitFor, function() {
    // remove event handler - we only want the stuff triggered once
    $body.off(waitFor);

    triggerNowOrOnLoaded(waitForTypes, callback);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>Hi!</body>

Answer 13

मैं आकार की जाँच कर रहा हूँ जब सभी ajax लोड पूरा हो गया

function get_ajax(link, data, callback) {
    $.ajax({
        url: link,
        type: "GET",
        data: data,
        dataType: "json",
        success: function (data, status, jqXHR) {
            callback(jqXHR.status, data)
        },
        error: function (jqXHR, status, err) {
            callback(jqXHR.status, jqXHR);
        },
        complete: function (jqXHR, status) {
        }
    })
}

function run_list_ajax(callback){
    var size=0;
    var max= 10;
    for (let index = 0; index < max; index++) {
        var link = 'http://api.jquery.com/ajaxStop/';
        var data={i:index}
        get_ajax(link,data,function(status, data){
            console.log(index)
            if(size>max-2){
                callback('done')
            }
            size++
            
        })
    }
}

run_list_ajax(function(info){
    console.log(info)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Comments

अपने उदाहरण के लिए अंगूठे।

— मैरवाअहमद

Answer 14

एलेक्स के जवाब पर विस्तार करने के लिए, मेरे पास चर तर्कों और वादों के साथ एक उदाहरण है। मैं अजाक्स के माध्यम से छवियों को लोड करना चाहता था और उन्हें सभी लोड होने के बाद पृष्ठ पर प्रदर्शित करना चाहता था।

ऐसा करने के लिए, मैंने निम्नलिखित प्रयोग किया:

let urlCreator = window.URL || window.webkitURL;

// Helper function for making ajax requests
let fetch = function(url) {
    return $.ajax({
        type: "get",
        xhrFields: {
            responseType: "blob"
        },
        url: url,
    });
};

// Map the array of urls to an array of ajax requests
let urls = ["https://placekitten.com/200/250", "https://placekitten.com/300/250"];
let files = urls.map(url => fetch(url));

// Use the spread operator to wait for all requests
$.when(...files).then(function() {
    // If we have multiple urls, then loop through
    if(urls.length > 1) {
        // Create image urls and tags for each result
        Array.from(arguments).forEach(data => {
            let imageUrl = urlCreator.createObjectURL(data[0]);
            let img = `<img src=${imageUrl}>`;
            $("#image_container").append(img);
        });
    }
    else {
        // Create image source and tag for result
        let imageUrl = urlCreator.createObjectURL(arguments[0]);
        let img = `<img src=${imageUrl}>`;
        $("#image_container").append(img);
    }
});

एकल या एकाधिक url के लिए काम करने के लिए अद्यतन किया गया: https://jsfiddle.net/euypj5w9/

Answer 15

उल्लिखित अन्य उत्तरों के रूप में आप ajaxStop()प्रतीक्षा करने के लिए उपयोग कर सकते हैं जब तक कि सभी AJAX अनुरोध पूरा न हो जाए।

$(document).ajaxStop(function() {
     // This function will be triggered every time any ajax request is requested and completed
});

यदि आप इसे किसी विशेष ajax()अनुरोध के लिए करना चाहते हैं तो आप जो सबसे अच्छा कर सकते हैं, complete()वह है ajax अनुरोध के अंदर उपयोग की जाने वाली विधि:

$.ajax({
    type: "POST",
    url: "someUrl",
    success: function(data) {
        // This function will be triggered when ajax returns a 200 status code (success)
    },
    complete: function() {
        // This function will be triggered always, when ajax request is completed, even it fails/returns other status code
    },
    error: function() {
        // This will be triggered when ajax request fail.
    }
});

लेकिन, अगर आपको केवल कुछ और निश्चित अजाक्स अनुरोध के लिए इंतजार करने की आवश्यकता है? जब तक आप इंतजार नहीं करना चाहते हैं, तब तक प्रतीक्षा करने के लिए अद्भुत जावास्क्रिप्ट वादों का उपयोग करें । मैंने आपको यह दिखाने के लिए एक शीघ्र, आसान और पठनीय उदाहरण दिया कि वादे अजाक्स के साथ कैसे काम करते हैं।
कृपया अगले उदाहरण पर एक नज़र डालें । मैं setTimeoutउदाहरण को स्पष्ट करता था।

// Note:
// resolve() is used to mark the promise as resolved
// reject() is used to mark the promise as rejected

$(document).ready(function() {
    $("button").on("click", function() {

        var ajax1 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://miro.medium.com/max/1200/0*UEtwA2ask7vQYW06.png",
                xhrFields: { responseType: 'blob'},
                success: function(data) {
                    setTimeout(function() {
                        $('#image1').attr("src", window.URL.createObjectURL(data));
                        resolve(" Promise ajax1 resolved");
                    }, 1000);
                },
                error: function() {
                    reject(" Promise ajax1 rejected");
                },
            });
        });

        var ajax2 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://cdn1.iconfinder.com/data/icons/social-media-vol-1-1/24/_github-512.png",
                xhrFields: { responseType: 'blob' },
                success: function(data) {
                    setTimeout(function() {
                         $('#image2').attr("src", window.URL.createObjectURL(data));
                         resolve(" Promise ajax2 resolved");
                    }, 1500);
                },
                error: function() {
                    reject(" Promise ajax2 rejected");
                },
            });
        });

        var ajax3 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://miro.medium.com/max/632/1*LUfpOf7teWvPdIPTBmYciA.png",
                xhrFields: { responseType: 'blob' },
                success: function(data) {
                    setTimeout(function() {
                         $('#image3').attr("src", window.URL.createObjectURL(data));
                         resolve(" Promise ajax3 resolved");
                    }, 2000);
                },
                error: function() {
                    reject(" Promise ajax3 rejected");
                },
            });
        });
        
        Promise.all([ajax1, ajax2, ajax3]).then(values => {
            console.log("We waited until ajax ended: " + values);
            console.log("My few ajax ended, lets do some things!!")
        }, reason => {
            console.log("Promises failed: " + reason);
        });
        
        // Or if you want wait for them individually do it like this
        // ajax1.then(values => {
        //    console.log("Promise 1 resolved: " + values)
        // }, reason => {
        //     console.log("Promise 1 failed: " + reason)
        // });
    });

});

img {
  max-width: 200px;
  max-height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Make AJAX request</button>
<div id="newContent">
    <img id="image1" src="">
    <img id="image2" src="">
    <img id="image3" src="">
</div>

Answer 16

मुझे सरल तरीका मिला, इसका उपयोग करना shift()

function waitReq(id)
{
  jQuery.ajax(
  {
    type: 'POST',
    url: ajaxurl,
    data:
    {
      "page": id
    },
    success: function(resp)
    {
      ...........
      // check array length if not "0" continue to use next array value
      if(ids.length)
      {
        waitReq(ids.shift()); // 2
      )
    },
    error: function(resp)
    {
      ....................
      if(ids.length)
      {
        waitReq(ids.shift());
      )
    }
  });
}

var ids = [1, 2, 3, 4, 5];    
// shift() = delete first array value (then print)
waitReq(ids.shift()); // print 1

Answer 17

मेरा समाधान इस प्रकार है

var request;
...
'services': {
  'GetAddressBookData': function() {
    //This is the primary service that loads all addressbook records 
    request = $.ajax({
      type: "POST",
      url: "Default.aspx/GetAddressBook",
      contentType: "application/json;",
      dataType: "json"
    });
  },

  ...

  'apps': {
    'AddressBook': {
      'data': "",
      'Start': function() {
          ...services.GetAddressBookData();
          request.done(function(response) {
            trace("ajax successful");
            ..apps.AddressBook.data = response['d'];
            ...apps.AddressBook.Filter();
          });
          request.fail(function(xhr, textStatus, errorThrown) {
            trace("ajax failed - " + errorThrown);
          });

काफी अच्छी तरह से काम किया। मैंने इसे करने के कई अलग-अलग तरीकों की कोशिश की है, लेकिन मैंने इसे सबसे सरल और सबसे पुन: प्रयोज्य पाया। आशा है ये मदद करेगा

Answer 18

मेरा समाधान देखो:

1. इस फ़ंक्शन (और चर) को अपनी जावास्क्रिप्ट फ़ाइल में शामिल करें:

var runFunctionQueue_callback;

function runFunctionQueue(f, index, callback) {

  var next_index = index + 1

  if (callback !== undefined) runFunctionQueue_callback = callback;

  if (f[next_index] !== undefined) {
    console.log(index + ' Next function avalaible -> ' + next_index);
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      complete: function() {
        runFunctionQueue(f, next_index);
      }
    });
  } else {
    console.log(index + ' Last function');
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      async: false,
      complete: runFunctionQueue_callback
    });
  }
}

2. इस तरह से अपने अनुरोध के साथ एक सरणी:

var f = [
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}}
        ];

3. बनाएँ कॉलबैक समारोह:

function Function_callback() {
  alert('done');
}

4. RunFunctionQueue फ़ंक्शन पैरामीटर के साथ कॉल करें:

runFunctionQueue(f, 0, QuestionInsert_callback);
// first parameter: array with requests data
// second parameter: start from first request
// third parameter: the callback function

Answer 19

$.whenमेरे द्वारा काम callback(x)करने के बजाय , return xयहाँ वर्णित के रूप में काम नहीं किया गया: https://stackoverflow.com/a/13455253/10357604

Answer 20

इस तरह आजमाएं। अजाक्स कॉल समाप्त होने तक प्रतीक्षा करने के लिए जावा स्क्रिप्ट फ़ंक्शन के अंदर एक लूप बनाएं।

function getLabelById(id)
{
    var label = '';
    var done = false;
    $.ajax({
       cache: false,
       url: "YourMvcActionUrl",
       type: "GET",
       dataType: "json",
       async: false,
       error: function (result) {
         label='undefined';
         done = true;
        },
       success: function (result) {
            label = result.Message;
            done = true;
        }
     });

   //A loop to check done if ajax call is done.
   while (!done)
   {
      setTimeout(function(){ },500); // take a sleep.
   }

    return label;
}

Comments

आपका setTimeout()नहीं है take a sleep। इस स्थिति में, आप सभी टैब को तब तक रोकते हैं जब तक कि doneयह सच न हो जाए।

— एलेक्सिस विलके

मुझे लगता है कि यह विषय इस प्रकार है: "सभी jQuery के अजाक्स अनुरोध किए जाने तक प्रतीक्षा करें"।

— चाइनाहेलोवर्ल्ड

क्या आपने इस कोड का परीक्षण किया है? मेरी उम्मीद है कि doneजब तक लूप अभी भी चल रहा है, तब तक यह सच नहीं होगा। यदि लूप चल रहा है, तो ईवेंट लूप जारी नहीं रह सकता है और इसलिए अजाक्स की सफलता के लिए कॉलबैक नहीं चलाया जाएगा।

— केविन बी