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