处理延迟对象数组

Question

自从使用$.Deferred后，我已经遇到了几次这种情况：我有一些值的列表，每个值都以某种方式产生一个Deferred对象，并且我想在所有Deferred对象都被解决后执行回调。更具体的例子如下：

var urls = [ 'foo.com', 'bar.com', 'baz.com', 'qux.com' ],
    defers = [], defer;

for( var i = 0, j = urls.length; i < j; i++ ){
    defer = $.ajax({
        url: 'http://' + urls[ i ]
    });

    defers.push(defer);
}

$.when.apply(window, defers).done(function(){
    // Do Something
});

在我的示例代码中，是否有更优雅的解决方案？

- Jeff Rose

---

你为什么认为这不够优雅？ - topek

在第三次编写这样的代码后，我开始认为这是一个相当常见的情况，并且可能会被延迟对象框架以一种更好的方式处理，而我只是忽略了它。 - Jeff Rose

Answer 1

是的，你应该避免在循环中引用查找值。始终制作副本。

var urls = [ 'foo.com', 'bar.com', 'baz.com', 'qux.com' ],
    defers = [], defer;

var urlsLength = urls.length;
for( var i = 0, j = urlsLength; i < j; i++ ){
    defer = $.ajax({
        url: 'http://' + urls[ i ]
    });

    defers.push(defer);
}

$.when.apply(window, defers).done(function(){
    // Do Something
});

但是，说真的，我只是在开玩笑。那段代码很棒。坚持下去。

- Sinetheta

---

你对查找值的理解是正确的，但将其放在声明中（即 var i = 0, j = urls.length）会将其缓存。你要避免的是将其放在比较中（即 i < urls.length）。 :-) - Jeff Rose

Answer 2

更优雅的编写此示例的方法是使用数组映射函数（或jQuery的$.map）：

var urls = [ 'foo.com', 'bar.com', 'baz.com', 'qux.com' ];

var defers = urls.map( function( url) {
    return $.ajax({
        url: 'http://' + url
    });
});

$.when.apply(window, defers).done(function(){
    // Do Something
});

你甚至可以自己编写“whenDone”和“fetchURL”函数：

你可以自定义“whenDone”和“fetchURL”函数：

Array.prototype.whenDone = function(callback){
    return $.when.apply(window, this).done(callback);
}

function fetchURL(url){
    return $.ajax({
        url: 'http://' + url
    });
}

var urls = [ 'foo.com', 'bar.com', 'baz.com', 'qux.com' ];    

urls.map( fetchUrl ).whenDone(function(){
    // Do Something
});

- user2472778

Answer 3

这里有一个我写的辅助函数叫做LoadInitialData，可以像这样调用：LoadInitialData(urlArray, dataReturnedArray, callback)

    ///  
///  1. The magical function LoadInitialData
///  

            ///  
            /// <summary>
            ///    This functions allows you to fire off a bunch of ajax GET requests and run a callback function when
            ///    all the requests come back that contains an array of all your ajax success data
            /// </summary>
            /// <params>
            ///           urlArray - an array of urls to be looped and ajaxed
            ///    dataReturnedArray - this array will contain all data returned from your ajax calls. Its stuctured like this
            ///         [{url: "http//site.com/1", "data": "your data"}, {url: "http//site.com/2", "data": "your data"}]
            ///           dataReturnedArray[0] is data from call 1,  dataReturnedArray[1] is data from call 2 etc. It might be a 
            ///         good idea to pass in a global array so you can use this data throughout your application.
            ///     callback - a function that runs after all ajax calles are done, dataReturnedArray is available in the callback
            /// </parms>
            ///
            function LoadInitialData(urlArray, dataReturnedArray, callback){
               // set up a deffered promise to fire when all our async calls come back
                var urls = urlArray, defers = [], defer;
                   var urlsLength = urls.length;
                   for( var i = 0, j = urlsLength; i < j; i++ ){
                       var u = urls[ i ];
                          defer = $.ajax({
                          type : "GET",
                           dataType : "jsonp",
                           url: u,
                           success: function(data){
                                 dataReturnedArray.push({
                                        url: u,
                                        data: data
                                 });
                           }
                       });
                       defers.push(defer);
                   }
                   $.when.apply(window, defers).then(function(){   
                          // Do Something now that we have all the data
                       console.log("done fetching all data");
                       callback(dataReturnedArray);
                   });
             }



///  
///  2. Your config…. urlArray, dataReturnedArray, callback
///  

         var app = app || {};
         app.data = []; // will hold the fetched data
         var urlArr = ["http://site.com/2", "http://site.com/2"]; // the urls to get data from


         // function to call once all the data is loaded
         callback = function(data){

            // data cleansing
            var tblData = [];                        
            $.each(data, function(key, value){
                   $.each(value.data, function(key, value){
                          tblData.push(value); 
                   });
             });

            $("#loader").hide();
         };


///  
///  3. Kick it all off!
///  

         // show a loader here
         $("#loader").show();

         // fire off the code to fetch the initial data
         LoadInitialData(urlArr, app.data, callback);

- Nick Theile