批量加載的陣列與JavaScript

Question

可能重複：
Wait until all jquery ajax request are done?

我有一個N大小的陣列。該數組的每個元素都需要使用jquery通過AJAX加載。我有加載邏輯完整，我剛纔想弄清楚如何加載只有10（公式應該能夠處理不斷變化的這個值）的時間，在10個項目完成加載通過AJAX，加載下一個10這裏是我的例子。

我有一個數組的100個元素，第0-9項需要加載，當那些10個項目完成後，10-19，20-29，然後等我試圖讓這個有效率儘可能，謝謝你的幫助。

雖然這可能是完全關閉，我希望我整個讓我點得到任何幫助。

//Formula calculation 
while(wait till count is complete){ 

} 
function LoadBatch(array){ 
$.each(array,function(i,item){ 
$.ajax({ 
success:function(){ 
//Maybe a counter here to let loop know when to kick off next batch. 
} 
}); 
}); 
} 

Answer 1

使用控制流庫會讓您的生活更輕鬆。 Aysnc.queue()看起來合適。它將確保不超過10個請求同時處於活動狀態。它不會等待之前的10到開始下一個負載之前完成。這應該儘量減少加載時間，同時限制併發請求

下面是一個例子：

var results = []; 
var concurrency = 10; 

var q = async.queue(function (task, done) { 
    var item = task.item; 
    $.ajax({ 
    success: function(result) { 
     // Store results in array with indicies matching the original array. 
     // If you don't care about the order of the results you could just 
     // push them on. 
     results[task.index] = result; 
     done(); 
    }); 
}, concurrency); 

// push all the array items into the queue, keeping track of the index 
$.each(array, function(i, item) { 
    q.push({ 
    index: i, 
    item: item 
    }); 
}); 

// drain will be called when all the requests are done 
q.drain = function() { 
    console.log(results); // results has all the responses 
} 

Answer 2

做一些如下：

function loadArray(array, batchSize, callback) { 
    var length = array.length 
    batchSize = length < batchSize ? length : batchSize; // minimum 
    var batch = array.slice(0, batchSize); // the current batch 
    array = array.slice(batchSize); // the rest of the array 

    loadBatch(batch, function (results) { 
     if (array.length) { // there are more batches to process 
      // load the rest of the array 
      loadArray(array, batchSize, function (nextResults) { 
       // merge the results - recursion handles the rest 
       callback(results.concat(nextResults)); 
      }); 
     } else callback(results); // last batch 
    }); 
} 

的loadBatch功能如下：

function loadBatch(batch, callback) { 
    var completed = 0; 
    var length = batch.length; 
    var results = new Array(length); // the array of results 

    $.each(array, function (index, element) { 
     $.ajax(element, { 
      complete: function (xhr, status) { 
       // save the results 
       results[index] = { 
        xhr: xhr, 
        status: status 
       }; 

       if (++completed === length) callback(results); // done 
      } 
     }); 
    }); 
} 

現在，您可以按如下加載你的資源：

loadArray(["a.json", "b.txt", ...], 10, function (results) { 
    var a = JSON.parse(results[0]); 
    var b = results[1]; 
    // and so on 
}); 

這它。告訴我，如果你有任何問題。