jQuery每次完成时，触发函数答案

【问题标题】：jQuery when each is completed, trigger functionjQuery每次完成时，触发函数
【发布时间】：2012-01-17 14:41:25
【问题描述】：

当 .each 完成循环我的元素时，如何启动一个类似重定向到新页面的功能？这是我当前的代码：

$('#tabCurrentFriends > .dragFriend').each(function(){ 
    var friendId = $(this).data('rowid');
    $.ajax({
        type: "POST", url: "../../page/newtab.php", data: "action=new&tabname=" + tabname + "&bid=" + brugerid + "&fid=" + friendid,
        complete: function(data){
        }
    });
});

【问题讨论】：

何时完成循环或完成 AJAX 请求？
当它完成循环 .each 函数时，假设我有 6 个元素与 ajax 函数一起使用，当 6 个元素被“ajaxed”时，它会做一些事情
循环几乎瞬间完成。 ajax 请求需要时间，您必须等待响应。一旦收到响应，就会执行完整的功能。研究“异步”这个术语 - en.wikipedia.org/wiki/Ajax_(programming)

标签： jquery each

【解决方案1】：

您可以在所有 AJAX 请求完成后使用$.when()/$.then() 重定向您的用户：

//create array to hold deferred objects
var XHRs = [];
$('#tabCurrentFriends > .dragFriend').each(function(){  
    var friendId = $(this).data('rowid'); 

    //push a deferred object onto the `XHRs` array
    XHRs.push($.ajax({ 
        type: "POST", url: "../../page/newtab.php", data: "action=new&tabname=" + tabname + "&bid=" + brugerid + "&fid=" + friendid, 
        complete: function(data){ 
        } 
    })); 
}); 

//run a function when all deferred objects resolve
$.when(XHRs).then(function (){
    window.location = 'http://stackoverflow.com/';
});

编辑 - 要将when 与数组一起使用，必须使用apply：

$.when.apply(null, XHRs).then(function () {
    window.location = 'http://stackoverflow.com/';
});

jQuery AJAX 请求创建延迟对象，当它们的完整函数触发时解析。此代码将这些延迟对象存储在一个数组中，当它们全部解析时，.then() 中的函数将运行。

文档：

$.when(): http://api.jquery.com/jquery.when
$.then()：http://api.jquery.com/deferred.then/

【讨论】：

XHRs 变量有什么作用？
@Flaashing 它是一个延迟对象数组，当与它们关联的 AJAX 调用完成时会解析。 $.when() 等待 XHRs 数组中的所有延迟对象解析（意味着所有 AJAX 调用都已完成）并运行 .then() 中的函数。
当传递 $.when() 一个这样的数组时，它需要像这样格式化才能工作。 $.when.apply(null, XHRs)
@Boidy 是不是因为$.when 的签名需要一个对象或对象列表，而不是对象数组？我必须筛选一些旧代码，但我相信我测试了这个解决方案。
@jasper 是的，我相信。自从您最初发布此答案以来，它的使用时间可能略有变化。当我在这里使用您的答案来尝试解决我自己的问题时，我无法让它工作，所以我再次发布了问题，使用apply() 是我得到的建议，它奏效了。为了帮助别人，我想我也会把这个问题的建议传递给我。见stackoverflow.com/questions/24306790/…。

【解决方案2】：

AJAX 是异步发生的，所以你必须尝试这样的事情：

var total = $('#tabCurrentFriends > .dragFriend').length;
var completed = 0;

$('#tabCurrentFriends > .dragFriend').each(function(){ 
    var friendId = $(this).data('rowid');
        $.ajax({
            type: "POST", url: "../../page/newtab.php", data: "action=new&tabname=" + tabname + "&bid=" + brugerid + "&fid=" + friendid,
            complete: function(data){
              completed++;

              if (completed == total) {
                // All have been loaded.
              }
        }
    });
});

【讨论】：