Jak wykryć zakończenie przetwarzania wielu wywołań ajax w javascript?

Question

Zakładając, mam następujące:

function main() { 

    var finished = false; 

    for(var i=0; i < 3; i++) { 
    do(i); 
    } 
} 

function do(i) { 
    $.ajax({ 
    url:"myurl.com/"+i, 
    datatype:"text/xml", 
    success: function() { 

     // Two more layers of multiple nested $.ajax elements here 
    } 
    }) 
} 

Czy jest jakiś sposób mogę pop okno ostrzeżenia po wszystkich „nie” są zakończone po trzech powtórzeń? W jaki sposób? Pomoże w tym składnia.

Answer 1

Wywołanie ajax zwraca obiekt obietnicy jQuery. Możesz zebrać dane wyjściowe każdego z nich w tablicy i użyć $.when, aby "połączyć obietnice razem".

Ten kod jest podstawową ideą, co chcesz:

function main() { 

    var finished = false; 

    var defs = []; 

    for(var i=0; i < 3; i++) { 
    defs.push(do(i)); 
    } 

    $.when.apply(null, defs).done(function() { 
    //this code will only run when all ajax calls are complete 
    }); 
} 

function do(i) { 
    var promise = $.ajax({ 
    url:"myurl.com/"+i, 
    datatype:"text/xml", 
    success: function() { 

     // Two more layers of multiple nested $.ajax elements here 
    } 
    }) 

    return promise; 
} 

Przeglądarka może mieć wiele otwartych połączeń HTTP, nie pozwól naysayers przekonać inaczej. Oto tabela z maksymalnymi współbieżnymi połączeniami obsługiwanymi przez przeglądarkę. Niech statystyk użytkowania witryny będzie twoim przewodnikiem, ale nawet 2 żądań AJAX na raz jest szybszy niż całkowicie synchronicznych żądań danych ...

Firefox 2: 2 
Firefox 3+: 6 
Opera 9.26: 4 
Opera 12: 6 
Safari 3: 4 
Safari 5: 6 
IE 7:  2 
IE 8:  6 
IE 10:  8 
Chrome:  6 

Answer 2

Można użyć tablicę stanów dla tego:

function main() { 
    var ready = new Array(3); 
    for (var i = 0; i < 3; i++) { 
    ready[i] = false; 
    } 

    for (var i = 0; i < 3; i++) { 
    do(i, ready); 
    } 
} 

function do(i, ready) { 
    $.ajax({ 
    url:"myurl.com/"+i, 
    datatype:"text/xml", 
    success: function() { 
    // If there are multiple layers then the next statements should be executed in the last layer. 
    ready[i] = true; 
    if (isAllReady(ready)) { 
     alert("All done!"); 
    } 
    } 
    }) 
} 

function isAllReady(ready) { 
    var allReady = true; 
    for (var i = 0; i < 3; i++) { 
    if (!ready[i]) { 
     allReady = false; 
    } 
    } 
    return allReady; 
} 

Answer 3

Jako globalny:

var complete = 0; 

Wszystko AJAX wzywa;

$.ajax({ 
    ... //other attributes, 
    complete: function(){ 
    complete++; 
    if (complete == 3) { 
     alert('all completed'); 
    } 
    } 
}); 

Wykonałoby się to po wykonaniu trzech wywołań AJAX. Jeśli jednak chcesz go zwiększyć, zrób to.