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

Question

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

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

那么，我的问题是，可以暂停循环直到成功执行吗？

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 吗？我不明白这如何与 .each 和基于我的 div 类的循环一起发挥作用。

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

我能够在处理 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');