Jquery $.each through array

Question

I am using this code to loop through an array and call a function doAjax() for each value :

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

The function doAjax() will make a Ajax call and append some data to an html page. The problem is that when I loop through large array (10+ indexes) it is causing my website to crash.

The only way I can think to solve this problem is to make listener to the page like this:

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

so when the user scroll to the bottom of the page it will load more stuff.

So I want to make my $.each only call doAjax() 3 or 4 times. The problem I ran into is that its calling the same values from the array so I made a temporarily variable and stored my original array in it like so:

var temp = categories; 

and then every time $.each runs, I delete the value from the temp array.

I know this is not he best way to do stuff, but this what I was able to think of.

If you can suggest a better way to solve this problem that will be appreciated. Otherwise I want my $.each to run at least once (and loop through 3 or 4 elements only) when the doc loads, then delete the array elements that it already went through, then run again (only through 3 or 4 elements)when the user scroll to the bottom of the page until there is no more elements in the temp array..

Answer 1

To loop and remove the categories array 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

how about appending all the results of your array => doAjax function, then once its all done, then append to your page.. ala

this might work for reducing the array:

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);
}

or try below to store up all the ajax calls, then append.

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');
}