Question

我使用此代码循环遍历数组并为每个doAjax()调用函数value：

$.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时，我都会删除临时数组中的值。

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

如果你能提出一个更好的方法来解决这个问题，我们将不胜感激。否则我希望我的$ .each在doc加载时至少运行一次（并且仅循环3或4个元素），然后删除它已经通过的数组元素，然后再次运行（仅通过3或4个元素）用户滚动到页面底部，直到临时数组中没有更多元素..

Answer 1

循环并删除类别数组try，

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

如何附加数组的所有结果=＆gt; 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');
}

Jquery $ .each到数组

2 个答案: