4

jqueryを使用してhtml要素のグループを反復処理していeachます。各反復で、を呼び出しますget。成功したgetを追跡し、最後にカウントを出力したいと思います。

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

このコードの問題は、各メソッドがすべてのget呼び出しを開始し、getsを完了する前、およびnumSuccessful変数が更新される前にアラートを継続することです。テスト実行では、アラートの実行が速すぎたため、「4成功」ではなく「0成功」になりました。続行する前に、すべての取得が完了するまでコードを待機させるにはどうすればよいですか？「each」ステートメント全体の成功コールバックはありますか？

4

4 に答える 4

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

によって返されたpromiseを使用して、次の$.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

に置き換え$.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()エラーを通知しないため、エラーが発生した場合、final関数は実行されません。

代わりに、関数を使用するために変換する必要があり$.ajax()ます。そして、成功と失敗の両方のコールバックを定義します。それを行うのに助けが必要な場合は私に知らせてください。

于 2012-08-20T08:14:55.743 に答える