javascript - 如何等待多个 jquery 帖子完成？

Question

一旦多个 jquery 帖子完成，我正在尝试清除一个繁忙的图标并重新启用我的删除按钮。这是我当前的代码：

    $('#deleteimgs').live('click', function(e) {
        e.preventDefault();

        if ($('input[name="chk[]"]:checked').length > 0 ) {

            $('#deleteimgs').button('loading');
            $('#saveicon').show();

            var boxes = $('input[name="chk[]"]:checked');
            $(boxes).each(function(){

                 var id = $(this).attr('id').substr(7);
                 var self = this;

                 $.post("/functions/photo_functions.php", { f: 'del', imgid: id}, function(data){
                    if (data.success) {
                        $(self).hide();
                        $("#img_"+id).hide(250);
                    }
                }, "json");
            });

            $('#saveicon').hide();
            $('#deleteimgs').button('reset');
        }

    });

我的隐藏调用和重置调用在 foreach 循环完成之前被触发。在拨打这两个电话之前有没有办法等待完成？

$('#saveicon').hide();
$('#deleteimgs').button('reset');

Answer 1

HTTP 请求完成后，您应该使用success回调方法完成任何任务。在回调内部，您应该跟踪完成了多少请求，以及您的最后一个请求何时完成，然后执行您想要的代码。

您可以通过几种方式重构此代码，但是，它应该让您大致了解如何处理这种情况。

var boxes = $('input[name="chk[]"]:checked');
var totalBoxes = boxes.length;
var completedRequests = 0;

$(boxes).each(function(){

     var id = $(this).attr('id').substr(7);
     var self = this;

     $.post("/functions/photo_functions.php", { f: 'del', imgid: id}, function(data){
        if (data.success) {
            $(self).hide();
            $("#img_"+id).hide(250);

            //Increment the complete request count.
            completedRequests++;

            //Check if the last request has finished.  If it has, do your stuff!
            if (completedRequests == totalBoxes) {
                $('#saveicon').hide();
                $('#deleteimgs').button('reset');
            }
        }
    }, "json");
});

Answer 2

尝试类似：

$(document).on('click', '#deleteimgs', function(e) {
    e.preventDefault();

    if ($('input[name="chk[]"]:checked').length > 0 ) {

        $('#deleteimgs').button('loading');
        $('#saveicon').show();

        var boxes = $('input[name="chk[]"]:checked'),
            xhr = [];
        boxes.each(function(){
             var self = this,
                 id = self.id.substr(7);

             var request = $.post("/functions/photo_functions.php", { f: 'del', imgid: id}, function(data){
                if (data.success) {
                    $(self).hide();
                    $("#img_"+id).hide(250);
                }
            }, "json");
            xhr.push(request);
        });

        $.when.apply(null, xhr).done(function() {
            $('#saveicon').hide();
            $('#deleteimgs').button('reset');
        });
    }
});​

这会将所有请求存储在一个数组中，该数组稍后会传递给 $.when，当它们都完成后，done()函数将被执行。

Answer 3

为了跟进 DwB 的回答，使用 async 将是提供中介功能的一种简单方法。代替：

$(boxes).each(function(){

利用：

async.parallel(boxes.toArray().map(function(elem){
    var self = elem;
    return function (callback) {
        var id = $(self).attr('id').substr(7);

        $.post("/functions/photo_functions.php", { f: 'del', imgid: id}, function(data){
            if (data.success) {
                $(self).hide();
                $("#img_"+id).hide(250);
                callback();
            } else {
                callback(new Error("request failed"));
            }
        }, "json");
    }
}), function (err) {
    if(err) {
        console.log(err);
    } else {
        $('#saveicon').hide();
        $('#deleteimgs').button('reset');
    }
});

那应该行得通。

Answer 4

您需要计算您发布的帖子数量，调用中介函数来计算回复，然后在所有调用完成后进行隐藏和重置。

例如：

var postCount = 0;

function allPostsDone()
{
   $('#saveicon').hide();
   $('#deleteimgs').button('reset');
}

postCount += 1;
$.post("/functions/photo_functions.php",
       { f: 'del', imgid: id},
       function(data)
       {
         if (data.success)
         {
           $(self).hide();
           $("#img_"+id).hide(250);
         }

         postCount -= 1;
         if (postCount == 0)
         {
           allPostsDone();
         }
       }, "json");