Keine Blockierung setTimeout (fn, 0)

Question

Ich benutze JavaScript seit vielen Jahren als ein Werkzeug, aber erst vor kurzem habe ich begonnen, Anwendungen damit zu programmieren. Nachdem ich Crockford on JavaScript - Level 6: Loopage geschaut habe, habe ich begonnen, die Ereignisschleife und den Stil des Nicht-Blockierens zu schätzen. Um das besser in den Griff zu bekommen, bin ich zurück zu einer App gegangen, in der ich glaube, dass ich einen schlecht gestalteten Codebereich habe.

Die Anwendung lädt eine ~ 45KB JSON-Datei (minimierte, unkomprimierte) mit ~ 20 Elementen herunter, so dass im Durchschnitt jedes Element etwa 2,25KB Daten enthält. Der Download findet jede Minute statt und wird manuell ausgelöst. An diesem Punkt ersetzt das neue Array das alte Array. Alle 15 Sekunden wird das DOM gelöscht und das Array wird über iteriert. Berechnungen und Logik werden für die Daten ausgeführt, um Gruppen von DOM-Elementen zu erstellen, die in das DOM eingefügt werden.

Anstatt tun:

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

Wie würde ich es in einer Art und Weise keine Blockierung implementieren? So weit habe ich mir gedacht:

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

Ich kann meinen Kopf nicht herumkommen. Ich weiß, das wird fehlschlagen, wenn die Daten zwischen den performLogic() Aufrufe heruntergeladen wurden, wie die Array-Länge ändern kann, unabhängig davon, ob die Gruppe der Daten nicht aus dem gleichen Array sein wird.

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