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

时间:2015-03-11 02:06:47

标签: ajax each

我在一个包含在setInterval函数中的.each循环中有一个ajax调用。 这样就可以在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类使用.each和循环。

我无法弄明白!任何帮助将不胜感激。

当我使用ajax调用时,我能够得到。但是我不明白如何制作。当我做我需要的时候(停止循环直到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");
  });       

});

1 个答案:

答案 0 :(得分: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');