Cuộc gọi Jquery ajax trong mỗi vòng lặp

Question

Tôi gặp sự cố khi sử dụng các hàm jquery .each() và .ajax() cùng nhau. Tôi đang sử dụng .each() để lặp qua 5 phần tử và đang thực hiện cuộc gọi .ajax() cho mỗi phần tử. Vấn đề của tôi là tôi chỉ muốn vòng lặp tiếp tục khi một phản hồi đã nhận được từ mỗi yêu cầu ajax. Hiện tại, tất cả 5 phần tử đang được lặp lại, 5 yêu cầu ajax được thực hiện, sau đó 5 câu trả lời được trả về.

Hers là một ví dụ đơn giản:

$(".element").each(function() { 
    var id= $(this).find(('txtId').val(); 
    $.ajax({ 
     type: "POST", 
     url: "/Handlers/Handler.ashx", 
     data: "ID=" + id, 
     success: function(xml){ 

     // I would like the each() loop to pause until this is hit, 
     // and some additional logic can be performed. 

     } 
    }); 

}); 

Cheers.

Answer 1

Bạn có thể sử dụng tùy chọn async cho điều này để làm cho mỗi đồng bộ theo yêu cầu (= dừng thực hiện kịch bản cho đến khi mỗi yêu cầu là xong):

async Theo mặc định, tất cả các yêu cầu được gửi không đồng bộ (ví dụ này được đặt thành true theo mặc định). Nếu bạn cần các yêu cầu đồng bộ, hãy đặt tùy chọn này thành false. Yêu cầu miền chéo và kiểu dữ liệu: yêu cầu "jsonp" không hỗ trợ thao tác đồng bộ. Lưu ý rằng các yêu cầu đồng bộ có thể tạm thời khóa trình duyệt, vô hiệu hóa bất kỳ hành động nào trong khi yêu cầu đang hoạt động.

nhưng, như các tài liệu đã nói, điều này không được khuyến khích vì nó có thể đóng băng trình duyệt nếu yêu cầu bị treo hoặc hết giờ.

Sẽ tốt hơn nếu thay đổi kiến ​​trúc mã của bạn theo cách có thể hoạt động với các chức năng gọi lại cổ điển nếu có thể.

Answer 2

Pekka có câu trả lời đúng. Bạn chỉ cần chỉnh sửa kịch bản của bạn như dưới đây.

$(".element").each(function() { 
    var id= $(this).find(('txtId').val(); 
    $.ajax({ 
     type: "POST", 
     async: false, 
     url: "/Handlers/Handler.ashx", 
     data: "ID=" + id, 
     success: function(xml){ 

     } 
    }); 

}); 

Answer 3

Tôi rất vui khi nói có cách ... nhưng hơi khó chịu.

Nếu bạn chắc chắn yêu cầu phải trả lại thứ gì đó, bạn có thể xóa phần "tryIteration".

$(document).ready(function() { 

     loop(".buttonsPromotion", 0); 

}); 

function loop(elements, tryIteration) { 
//HOW MANY TRIES UNTIL WE STOP CHECKING 
if(tryIteration<7){ 

    $(elements).each(function() {    
     var actuel = $(this); 
     $.ajax({ 
      url: "write your link here", 
      data: {}, 
      dataType: 'json', 
      async: true, 
      success: function(data){ 
       //HERE WE KNOW THE AJAX REQUEST WENT OK 
       actuel.addClass('AjaxOK');  
      }, 
      error:function(thrownError){ 
       console.log(thrownError); 
       //WE MAKE ANOTHER EACH ON ALL ELEMENT THAT WENT BAD 
       var elemToRetry = actuel.not('AjaxOK'); 
       loop(elemToRetry, ++tryIteration); 
      } 
     }); 

    }); 
} 
} 

Answer 4

Bạn có thể sử dụng hàm jquery deffered và lời hứa để kiểm tra cuộc gọi không đồng bộ thành công hay không. http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/