Ajax 在 .each 循环中的下一次迭代之前等待成功

Question

我在 .each 循环中有一个 ajax 调用，该循环包含在 setInterval 函数中。这只需要 html 页面上的几行代码就可以处理仪表板上许多 div 的更新。

我担心服务器滞后与客户端速度。如果在循环进入下一次迭代之前服务器没有响应数据会发生什么？

所以，我的问题是，是否可以暂停循环，直到执行成功？

Ajax 通话：

setInterval(function() {
$(".ajax_update").each(function(){
    $.ajax({
            type: "POST",
            dataType: "json",
            url: "ajax/automated_update/confirmed_appointments.php",
            data: "clinic_id=<? echo $clinic_id ?>&tomorrow=<? echo $tomorrow ?>&"+$(this).data('stored'), // serializes the form's elements.
            success: function(data)
            {
                $(data[0]).html(data[1]);
            }
        });
});
}, 5000); //5 seconds*
</script>

我已经研究了 .ajaxComplete()，但我不知道如何应用它作为解决方案。

我也考虑过将循环变成像这样自称的东西：

function doLoop() {
   if (i >= options.length) {
      return;
   }
   $.ajax({
   success: function(data) {
      i++;
      doLoop();
   }
   });
}

但这不会干扰 .each 吗？我不明白根据我的 div class.

这对 .each 和循环有什么好处

我就是想不通！任何帮助将不胜感激。

我能够在使用 ajax 调用时获得 .when，但我不明白如何使 .when 做我需要的（停止循环直到 ajax 调用完成） .

$(".ajax_update").each(function(){
    $.ajax({
            type: "POST",
            dataType: "json",
            url: "ajax/automated_update/confirmed_appointments.php",
            data: "clinic_id=<? echo $clinic_id ?>&tomorrow=<? echo $tomorrow ?>&"+$(this).data('stored'), // serializes the form's elements.
            success: function(data)
            {
                $(data[0]).html(data[1]);

            }
        });
 $.when( $.ajax() ).done(function() {
    alert("Finished it");
  });       

});

Answer 1

稍微考虑一下您的问题后，也许一个好的解决方案是放置一个事件，该事件将在您的仪表板更新之间以最短的时间触发一组新的更新。这将确保您的所有更新过程，我们确实在更新之间等待最短时间，然后再次触发更新周期。因此，如果您确实遇到任何延迟的 ajax 响应，您在前一个响应全部完成之前不要尝试另一个响应。

我还没有完全测试这段代码，但应该按照我描述的去做：

//create a dashboard object to handle the update deferred
var dashboard = {
    update: function (myquery) {
        var dfr = $.Deferred();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "ajax/automated_update/confirmed_appointments.php",
            data: "clinic_id=<? echo $clinic_id ?>&tomorrow=<? echo $tomorrow ?>&" + myquery,
            success: dfr.resolve
        });
        return dfr.promise();
    }
};
//create a simple deferred wait timer
$.wait = function (time) {
    return $.Deferred(function (dfd) {
        setTimeout(dfd.resolve, time);
    });
};
// use map instead of your .each to better manage the deferreds
var mydeferred = $(".ajax_update").map(function (i, elem) {
    return dashboard.update($(this).data('stored')).then(function (data, textStatus, jqXHR) {
        $(data[0]).html(data[1]);
    });
});
//where I hang my dashboardupdate event on and then trigger it
var mydiv = $('#mydiv');
var minimumDashboardUpdate = 5000;
$('#mydiv').on('dashboardupdate', function () {
    $.when.apply($, mydeferred.get())
        .then(function () {
        $.when($.wait(minimumDashboardUpdate)).then(function () {
            mydiv.trigger('dashboardupdate');
        });
    });
});
mydiv.trigger('dashboardupdate');

Ajax 在 .each 循环中的下一次迭代之前等待成功

Ajax wait on success before next iteration in .each loop

ajax

each