4

我正在使用 jquery 遍历一组 html 元素each。在每次迭代中，我调用一个get. 我想跟踪成功的获取并在最后输出一个计数。

var numSuccessful = 0;
$('.mySelector').each(function(){
    $.get('/myCfc.cfc?method=doSomething&id=' + $(this).attr('id'), 
        function(data){
            numSuccessful++;
    });
});
alert(numSuccessful + ' successful');

这段代码的问题是 each 方法开始所有的 get 调用，然后在完成 get 之前继续到警报 - 并且在 numSuccessful 变量更新之前。在测试运行中，我以“0 成功”而不是“4 成功”结束，因为警报执行得太快了。如何让代码等到所有完成后再继续？整个“each”语句是否有成功回调？

4

4 回答 4

1

您可以使用返回的承诺$.ajax来设置灵活的回调队列，如下所示：

var requests = []; //Array containing all the ajax calls

for (var i = 0; i < 9; i++) {
    requests.push(
    $.ajax({
        url: '/echo/html', //this is because of jsfiddle.net
        type: 'post', //this one too
        success: function() {
           //whatever
        }
    }));
}

$.when.apply($, requests).then(function() { //.apply is needed as we want to pass an Array
  //called when all requests are done
}).fail(function(){ //this will be triggered when one of the requests fails
  //error handling can go here
});

看到这个工作小提琴并阅读.when()和.then

在您的情况下，最终会出现：

var numSuccessful = 0;

var requests = $.makeArray($('.mySelector').map(function(){
    return $.ajax({
        url: '/myCfc.cfc?method=doSomething&id=' + this.id,
        type: 'GET'
    }).done(function(){
        numSuccessful++;
    });
}));

$.when.apply($, requests).then(function() {
    alert(numSuccessful + ' successful');
});​
于 2012-08-20T08:42:40.583 回答
1

您可以使用递归函数，请尝试以下操作：

var num = 0;
var $ms = $('.mySelector');

function go() {
     $.get('/myCfc.cfc?method=doSomething&id='+$ms.eq(num).attr('id'), 
       function(data){
            num++;
            if ((num-1) == $ms.length) callback(); else go();
     }).error(callback)
}

function callback(){
  alert(num)
}

go()
于 2012-08-20T08:26:00.413 回答
1

只需替换$.get并将$.ajax设置async设置为false。

$.ajax({
    url : '/myCfc.cfc',
    data : { 'method' : 'doSomething' , 'id' : $(this).attr('id') },
    async : false,
    success : function(data){
       numSuccessful++;
    }
});

通过这样做，这个脚本将等到它得到响应。

于 2012-08-20T09:12:39.503 回答
0 
var numSuccessful = 0;
var totalSelectors = $('#mySelector').length;
$('#mySelector').each(function(){
  $.get('/myCfc.cfc?method=doSomething&id=' + $(this).attr('id'), 
  function(data){
    numSuccessful++;
    if(!totalSelectors--) doneSelectors();
  });
});

function doneSelectors() {
  alert(numSuccessful + ' successful');
}

注意：以上功能不能正常工作！$.get()不会通知错误，因此如果您收到任何错误，最终函数将永远不会运行。

相反，您需要将其转换为使用该$.ajax()功能。并定义成功和失败回调。如果您需要帮助，请告诉我。

于 2012-08-20T08:14:55.743 回答