多个Ajax调用完成后执行操作(设置async:false)

时间:2014-07-23 23:27:48

标签: jquery ajax asynchronous

我有一组youtube频道名称: var a = [“MyHarto”,“vlogbrothers”,“pbsideachannel”];

我想遍历每个频道,查询Youtube Data API,并将每个频道的订阅者总数相加。我的问题是,即使在$ .ajax调用中将async设置为false,订阅者计数也会立即打印到屏幕上而无需等待。这是我的代码:

var subscriberTotalCount = 0; 
function grabStatsChannel() {
    $('#youtube-stats-ch').html("Working...");
    var myURL = "https://www.googleapis.com/youtube/v3/channels?";
    var a = ["MyHarto", "vlogbrothers", "pbsideachannel"];
    a.forEach(function(channel) {
        var query_params = {
            key : API_KEY,
            forUsername : channel,
            part : 'statistics'
        };
        $.ajax(myURL, {
            data : query_params,
            type : 'GET',
            async: false,
            dataType : 'jsonp',
            success : function(data) {
                $.each(data.items, function(i, entry) {         
                    subscriberTotalCount += parseInt(entry.statistics.subscriberCount);
                });
            }
        });
    });
    $('#youtube-stats-ch').html('');
    $('#youtube-stats-ch').append('Found' + subscriberTotalCount + ' subscribers.<br />');  
}

我尝试过设置一个似乎永远不会被解雇的ajaxcomplete函数。建议?我现在得到的是打印出0个订阅者,即使我可以看到日志记录表明Ajax调用成功并且订阅者计数最终设置正确。

是否有一种干净的方法可以阻止或进行最后的刷新?我认为将async设置为false可以在这里工作。不幸的是,如果我在成功函数中打印出总数,那么屏幕会随着每次总计更新而闪烁,这是我想要避免的。

1 个答案:

答案 0 :(得分:1)

以下是jquery网站管理多个ajax调用的简单示例... http://api.jquery.com/jquery.when/

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
  // a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
  // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
  var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
  if ( /Whip It/.test( data ) ) {
    alert( "We got what we came for!" );
  }
});