Question

I have been using JavaScript as a tool for many years now, but only recently have I begun programming applications with it. After watching Crockford on JavaScript – Level 6: Loopage I have begun to appreciate the Event Loop and the style of not blocking. To better get to grips with this I have gone back to an app where I am believe I have a badly designed area of code.

The application downloads an ~45KB JSON file (minified, uncompressed) containing ~20 elements, so on average each element has about 2.25KB of data. The download takes place every minute, as well as being manually triggered, at which point the new array replaces the old array. Every 15 seconds the DOM is cleared out and the array is iterated over. Calculations and logic are performed on the data to create groups of DOM elements to be inserted into the DOM.

Rather than doing:

for (int i = 0; i < array.length; i++) {
  // Perform logic
}

How would I implement it in a none blocking fashion? So far I have come up with:

var performLogic = function performLogic(element) {
  // Perform logic
}

var counter = 0;
var iterator = function iterator() {
  counter += 1
  if (counter < array.length) {
    performLogic(array[counter]);
    setTimeout(iterator, 0);
  }
}

setTimeout(function() {
  counter = 0;
  iterator();
}, 0);

I can’t get my head around it. I know this will fail if the data was downloaded in between the performLogic() calls, as the array length may alter, regardless the group of data won’t be from the same array.

Answer 1

var arrayData=[], // current data array for performing logic
    newArrayData=[], // new downloaded data array for performing logic
    arrayDataIndex=0;

var doAjaxRequest=function(fCallback){
  // here must be placed code which doing request for downloading data. "~45KB JSON file"
  // if success calling fCallback function and passing data.
};

var genNewDataArray=function(data){
  // here must be placed code which converts and saves "data" variable value 
  // into "newArrayData" variable value. For example:
  //   newArrayData = convertDataIntoArrayData(data);
  // next calling:
  setTimeout(newDataArrayLoaded,0);
  // or can be simply calling newDataArrayLoaded(); without setTimeout
};

var newDataArrayLoaded=function(){
  if(arrayDataIndex===0){
    arrayData=newArrayData;
    performLogicForAll();
  }
  else setTimeout(newDataArrayLoaded,0);
};

var performLogicForAll=function(){
  performLogicForOne(arrayData[arrayDataIndex]);
  arrayDataIndex++;
  if(arrayDataIndex===arrayData.length)arrayDataIndex=0;
  else setTimeout(performLogicForAll,0);
};

var performLogicForOne=function(){
};

// loading every 15 seconds a new data with help of setInterval.
// this is not optimized! use another logic in your page.
setInterval(function(){doAjaxRequest(genNewDataArray);},15000);