jQuery $ .each通過數組

Question

我正在使用此代碼循環遍歷數組，並為每個value調用函數doAjax() ：

$.each(categories, function(index, value){
        doAjax(value);
});

函數doAjax()將進行Ajax調用，並將一些數據附加到html頁面。 問題是，當我遍歷大型數組（超過10個索引）時，這會導致我的網站崩潰。

我認為可以解決此問題的唯一方法是使聽眾像這樣的頁面：

$(window).scroll(function(){
     if($(window).scrollTop() + $(window).height() >= $(document).height() - 50){
        //code to trigger function goes here
    }
});

因此，當用戶滾動到頁面底部時，它將加載更多內容。

所以我想讓$.each只調用doAjax() 3或4次。 我遇到的問題是它從數組中調用了相同的值，所以我做了一個臨時變量並將原始數組存儲在其中，如下所示：

var temp = categories; 

然后每次$.each運行時，我都會從temp數組中刪除該值。

我知道這不是他做事的最佳方式，而是我能想到的。

如果您可以提出解決此問題的更好方法，將不勝感激。 否則，我希望$ .each在文檔加載時至少運行一次（並僅循環3或4個元素），然后刪除它已經經歷的數組元素，然后在文檔重新運行（僅通過3或4個元素）用戶滾動到頁面底部，直到temp數組中沒有其他元素。

Answer 1

要循環並刪除類別數組，請嘗試，

function sendAjax(cat) {
    if(cat.length>1){
     var len = ( cat.length > 3 )  ? 3 : cat.length;
     for (var i = 0; i < len; i++) { //send ajax 3 times
        if (typeof cat[i] != "undefined") {
           // doAjax(cat[i]);
        }
     }
    }
    cat = cat.splice(len);//remove the first three elements from array
    return cat;  
}

Answer 2

如何追加數組=> doAjax函數的所有結果，然后全部完成，然后追加到您的頁面。.ala

這可能有助於減少數組：

var arr2 = categories.splice(0); // copy the original categories array to a new array
var rotationNum = 3;
function sendIt(){
   var lngth = (arr2.length < rotationNum) ? arr2.length : rotationNum; 
   for (var i = 0; i < lngth ; i++){
    //doAjax
   }
   arr2.splice(0,lngth);
}

或嘗試在下面存儲所有ajax調用，然后追加。

var categoriesDeferred = [];

for(var i = 0; i < categories.length; i++){
  categoriesDeferred.push(doAjax(categories[i]));
}

$.when.apply($, categoriesDeferred).then(everythingDoneFunc); 

function doAjax(data) {
  var dferred = $.Deferred();    
  //your ajax call here.. .
  setTimeout(function() { dferred.resolve() }, 2000);    

  return dferred.promise();
}

function everythingDoneFunc(){
  console.log('everything processeed');
}