.each() 循环中的 ajax 完成后 Jquery 运行代码答案

【问题标题】：Jquery run code after ajax in .each() loop finishes.each() 循环中的 ajax 完成后 Jquery 运行代码
【发布时间】：2013-12-10 04:18:02
【问题描述】：

我想在多个 ajax 调用完成后运行代码。 .each() 循环在所有复选框上调用 .update()，它们的更改事件运行 ajax 代码。

我有一组复选框，每个复选框在选中时都会发送一个 ajax 请求。顶部的复选框将更新所有子复选框以匹配顶部复选框。

我调用了.change() 函数以避免重复代码，因为它们的更改事件已经发送了ajax 请求。 on change 代码隐藏子复选框，success 函数使复选框再次可见。

我想隐藏父复选框，并且只有在所有子级都完成了多个 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>

问题是父复选框甚至不显示加载图像。 .change() 调用会立即返回，并且父复选框在您看到它停用之前就已恢复。我想在孩子们都完成之前让父复选框不可用。

我尝试过使用.promise() 和.when()，但还没有找到解决方案。

如何响应多个 ajax 请求？

如果您想查看页面的精简版本，请查看http://dl.dropboxusercontent.com/u/4621872/stackoverflow.html

【问题讨论】：

你能把所有相关的代码放上来吗？
是的 - 我们缺少整个 ajax 代码

标签： javascript jquery ajax each

【解决方案1】：

使用 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();
});

例如，如果您想预取所有图像

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

【讨论】：

谢谢！这看起来是一个很好的开始，但我仍然无法让它与排队 .change() 呼叫一起工作。在我的简化代码中，一个简单的 .ajax() 可以工作，但我实际上是在发布有关复选框状态的数据，并更新数据库。我更愿意将 ajax 调用保留在“子活动”更改事件处理程序中。我怎样才能让 .change() 函数在完成 ajax 调用时才被视为“完成”？或者我应该为此提出一个单独的问题？谢谢！