Làm thế nào để phát hiện khi xử lý xong cho nhiều cuộc gọi ajax trong javascript?

Question

Giả sử tôi có như sau:

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 
    } 
    }) 
} 

Có một số cách tôi có thể bật một hộp cảnh báo sau khi tất cả các "làm" đã kết thúc sau ba lần lặp? Làm sao? Cú pháp sẽ giúp ích.

Answer 1

Cuộc gọi ajax trả về đối tượng jQuery Promise. Bạn có thể thu thập đầu ra của từng cái trong một mảng và sử dụng $.when để 'nhóm' các lời hứa với nhau.

Mã này là ý tưởng cơ bản đằng sau những gì bạn muốn:

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; 
} 

Trình duyệt có thể có nhiều kết nối HTTP mở, đừng để những người phản đối thuyết phục bạn khác. Đây là bảng kết nối đồng thời tối đa được trình duyệt hỗ trợ. Hãy thống kê sử dụng trang web của bạn được hướng dẫn của bạn, nhưng ngay cả 2 yêu cầu ajax cùng một lúc là nhanh hơn so với yêu cầu dữ liệu hoàn toàn đồng bộ ...

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

Bạn có thể sử dụng một loạt các trạng thái cho việc này:

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

Như toàn cầu:

var complete = 0; 

Tất cả các cuộc gọi AJAX;

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

Điều này sẽ thực hiện khi thực hiện ba cuộc gọi AJAX. Tuy nhiên, nếu bạn cần tăng nó, thì hãy làm như vậy.