在.each（）循环中的ajax完成后，Jquery运行代码

Question

I want to run code after multiple ajax calls finish. 我希望在多个ajax调用完成后运行代码。 A .each() loop calls .update() on all checkboxes, and their change event runs the ajax code. .each()循环在所有复选框上调用.update() ，并且它们的change事件运行ajax代码。

I have a group of checkboxes that each send off an ajax request when checked. 我有一组复选框，每个复选框都会在选中时发送ajax请求。 A checkbox at the top will update all child checkboxes to match the top checkbox. 顶部的复选框将更新所有子复选框以匹配顶部复选框。

I called the .change() function to avoid duplicate code, as their change events already sent the ajax request. 我调用.change()函数来避免重复代码，因为它们的更改事件已经发送了ajax请求。 The on change code hides the child checkbox and the success function makes the checkbox visible again. on更改代码隐藏子复选框，success函数使复选框再次可见。

I want to hide the parent checkbox, and show it only after all children are done updating with the multiple ajax requests. 我想隐藏父复选框，并且只有在使用多个ajax请求更新所有子项后才显示它。

<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
    // Calls change event for all child checkboxes
    // I want it to hide this checkbox until all child ajax calls are complete
    $('#wrapper').on('change', '.parent-active', function () {
        var checkbox = $(this);
        checkbox.css('display', 'none').after('<img src="loading.gif"/>');
        var data = $('#category-content');
        var boxes = data.find('input[type=checkbox]');
        boxes.each(function( index, box ){
            if($(box).is(':checked') != $(checkbox).is(':checked')){
                $(box).prop('checked', $(checkbox).is(':checked')).change();
            }
        });
        checkbox.css('display', 'inline').next().remove();
    });

    // Hides checkbox, displays loading image, sends ajax, restores checkbox
    $('#wrapper').on('change', '.child-active', function () {
        var checkbox = $(this);
        checkbox.css('display', 'none').after('<img src="loading.gif"/>');
        $.ajax({
            url:        '/',
            type:       'post',
            complete:    function (data) {
                checkbox.css('display', 'inline').next().remove();
            }
        });
    });
});
</script>
<div id="wrapper">
    <table><tbody>
        <tr><td>Parent</td><td><input type="checkbox" class="parent-active" id="parent-active-1"/></td></tr>
    </tbody></table>
    <div id ="category-content"><table><tbody>
        <tr><td>Child 1</td><td><input type="checkbox" class="child-active"  id="child-active-1"/></td></tr>
        <tr><td>Child 2</td><td><input type="checkbox" class="child-active"  id="child-active-2"/></td></tr>
        <tr><td>Child 3</td><td><input type="checkbox" class="child-active"  id="child-active-3"/></td></tr>
    </tbody></table></div>
</div>

The problem is that the parent checkbox doesn't even show the loading image. 问题是父复选框甚至不显示加载图像。 The .change() calls return instantly, and the parent checkbox is restored before you can even see it deactivate. .change()调用立即返回，并且在您甚至可以看到它停用之前，将恢复父复选框。 I'd like to keep the parent checkbox unavailable until the children are all finished. 在孩子们全部完成之前，我想保持父复选框不可用。

I've tried using .promise() and .when() but haven't figured out a solution yet. 我已经尝试使用.promise()和.when()但还没有想出一个解决方案呢。

How can I react to multiple ajax requests? 我如何对多个ajax请求做出反应？

If you want to see a stripped down version of the page, check http://dl.dropboxusercontent.com/u/4621872/stackoverflow.html 如果您想查看页面的精简版本，请查看http://dl.dropboxusercontent.com/u/4621872/stackoverflow.html

Answer 1

With jQuery Deferred, it's pretty simple to wait for a bunch of AJAX calls to complete, eg: 使用jQuery Deferred，等待一堆AJAX调用完成非常简单，例如：

var deferreds = [];
$sel.each(function() {
    deferreds.push(
        $.ajax();    // make AJAX call for element $(this)
    );
});
$.when.apply($, deferreds).done(function() {
    // all AJAX calls have complete
    do_something();
});

For example, if you wanted to prefetch all images 例如，如果您想预取所有图像

var deferreds = [];
$('img').each(function() {
    deferreds.push(
        $.ajax($(this).attr('src'));
    );
});
$.when.apply($, deferreds).done(function() {
    // all images are now prefetched
});

在.each（）循环中的ajax完成后，Jquery运行代码

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-12-09 20:18:02

在.each（）循环中的ajax完成后，Jquery运行代码

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-12-09 20:18:02

解决方案1
3 已采纳 2013-12-09 20:18:02