How to break up a long running function in javascript, but keep performance -

i have long running function. iterates through large array , performs function within each loop.

longfunction : function(){        var self = this;        var data = self.data;         for(var i=0; len = data.length; i<len; i++){               self.smallfunction(i);        } }, smallfunction : function(index){  // stuff!  } 

for part fine when dealing arrays above around 1500 or point of recieving javascript execution alert message.

so need break up. first attempt so:

longfunction : function(index){        var self = this;        var data = self.data;         self.smallfunction(index);        if(data.slides[index+1){          settimeout(function(){             self.longfunction(index+1);          },0);       }       else {                //work finished       }  }, smallfunction : function(index){  // stuff!  } 

so here removing loop , introducing self calling function increases index each iteration. return control main ui thread in order prevent javascript execution warning method have added settimeout allow time update after each iteration. problem method getting actual work done takes quite literally 10 times longer. appears happening although settimeout set 0, waiting more 10ms. on large arrays builds quickly. removing settimeout , letting longfunction call gives performance comparable original loop method.

i need solution, 1 has comparable performance loop not cause javascript execution warning. unfortunately webworkers cannot used in instance.

it important note not need responsive ui during process. enough update progress bar every few seconds.

would breaking chunks of loops option? i.e. perform 500 iterations @ time, stop, timeout, update progress bar, perform next 500 etc.. etc..

is there better?

answer:

the solution seems chunking work.

by adding following self calling function allowing ui update every 250 iterations:

 longfunction : function(index){            var self = this;            var data = self.data;             self.smallfunction(index);            var nextindex = i+1;            if(data.slides[nextindex){             if(nextindex % 250 === 0){              settimeout(function(){                                self.longfunction(nextindex);              },0);             }             else {                 self.longfunction(nextindex);             }           }           else {                    //work finished           }      },     smallfunction : function(index){      // stuff!      } 

all doing here checking if next index divisble 250, if use timeout allow main ui thread update. if not call again directly. problem solved!

here's batching code modified earlier answer had written:

var n = 0,     max = data.length;     batch = 100;  (function nextbatch() {     (var = 0; < batch && n < max; ++i, ++n) {         myfunc(n);     }     if (n < max) {         settimeout(nextbatch, 0);     } })();