$ .each - 在继续之前等待jSON请求

Question

我遇到以下代码的问题：

jQuery.each正在加速运行，无需等待JSON请求完成。因此，'thisVariationID'和'thisOrderID'变量会被循环的最新迭代重置，然后才能用于较慢的getJSON函数。

有没有办法让每个迭代的.each等到getJSON请求和回调函数完成后再继续下一次迭代？

$.each($('.checkStatus'), function(){ 
      thisVariationID = $(this).attr('data-id'); 
      thisOrderID = $(this).attr('id'); 
      $.getJSON(jsonURL+'?orderID='+thisOrderID+'&variationID='+thisVariationID+'&callback=?', function(data){ 
       if (data.response = 'success'){ 
       //show the tick. allow the booking to go through 
        $('#loadingSML'+thisVariationID).hide(); 
        $('#tick'+thisVariationID).show(); 
       }else{ 
       //show the cross. Do not allow the booking to be made 
        $('#loadingSML'+thisVariationID).hide(); 
        $('#cross'+thisVariationID).hide(); 
        $('#unableToReserveError').slideDown(); 
        //disable the form 
        $('#OrderForm_OrderForm input').attr('disabled','disabled'); 
       } 
      }) 
     }) 

Answer 1

两件事情两个转变速战速决：

1. 使用var您的变量之前，使他们本地的，而不是全局性的。这样，你会得到每个迭代的新变量实例。始终使用var，除非你对污染全局命名空间真的打算：

   var thisVariationID = $(this).attr('data-id'); 
       var thisOrderID = $(this).attr('id'); 
   

2. 使用==比较，而不是=;）

   if (data.response == 'success'){ 
   

您的代码将最有可能开始工作后，如预期解决您似乎忽略的这些问题。但是，如果你愿意做出更大的改变，你也可以使用Deferreds。

要并行执行一串取的：

var fetches = $('.checkStatus').map(function() { 
    var thisVariationID = $(this).attr('data-id'), 
     thisOrderID = $(this).attr('id'); 

    return $.getJSON(/* blah blah */); 
}); 

fetches = $.when.apply($, fetches); 

fetches.done(function() { 
    // all parallel fetches done 
}); 

要序列取：

var fetching = $.when(); 

$('.checkStatus').each(function() { 
    var thisVariationID = $(this).attr('data-id'), 
     thisOrderID = $(this).attr('id'); 

    fetching = fetching.pipe(function() { 
     return $.getJSON(/* blah blah */); 
    }); 
}); 

fetching.done(function() { 
    // last fetch done 
}); 

矫枉过正？也许。但它是灵活的，有时可能会有值得的代码字面上读取“当我的提取完成”的语法糖。

（注：以上实施仅用于说明目的的乐观执行在实际的实现，你也应该处理故障。）

Answer 2

你只需要去激活异步机制。 看看这里：https://stackoverflow.com/a/933718/1343096

Answer 3

你需要使用 1）。非异步呼叫（如以下代码所示）：

$.ajax({ 
    url:jsonURL, 
    dataType:'json', 
    data:{orderID:thisOrderID, variationID:thisVariationID}, 
    async:false, 
    success:function() 
    { 
     // do stuff. 
    } 

2）。如果您使用jsonp跨站点，则需要链接您的呼叫而不是使用每个站点。使用每一个来构建一个数据数组，然后开始调用json，每次迭代都使用回调之前的数据。

---

加入：以OP澄清，跨站实施，其中规定了项目的进程列表，然后分别处理它们。

我已经碎成多是普通老式的Javascript，这是认为这是更容易在这种情况下阅读：

var items = []; 
function setUp() 
{ 
    items = []; // clear in case this gets recalled. 
    $('.checkStatus').each(function(idx, el){ 
     values.push({variationID:$(el).data('id'), orderID:$(el).attr('id')}); 
    } 
    if (items.length > 0) 
    { 
     consume(); 
    } 
} 
function handleResponse(data) 
{ 
    // do your data handling and formatting here. 
    if (items.length >= 0) consume(); 
} 
function consume() 
{ 
    var thisOrder = items.pop(); 
    $.ajax({ 
     url:jsonURL, 
     dataType:'jsonp', 
     data:{orderID:thisOrder.orderID, variationID:thisOrder.variationID}, 
     async:false, 
     success:handleResponse 
    }); 
} 
setUp(); 

注意的是，虽然这些都坐在他们站在全局命名空间，他们可以轻松地坐下在一个闭包或函数内部（即将整个事物包装在$（document）.ready（））中。

Answer 4

查看我的评论我不知道它为什么去那里而不是答案。 这里它是同步的，所以它等待响应。

jQuery: Possible to wait for $.get to finish loading before continuing?