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

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

例如：

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");

Answer 4

要跟进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');
    }
});

这应该有效。

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

4 个答案: