なしブロッキングsetTimeout（fn、0）

Question

私は長年にわたりツールとしてJavaScriptを使用してきましたが、最近ではそれを使ってアプリケーションをプログラミングし始めました。 Crockford on JavaScript - Level 6: Loopageを見て、私はイベントループとブロッキングしないスタイルに感謝し始めました。このことをよりよく理解するために、私はコードがひどく設計されていると信じているアプリに戻りました。

アプリケーションは、約20個の要素を含む〜45KBのJSONファイル（圧縮されていない、圧縮されていない）をダウンロードします。したがって、各要素には平均約2.25KBのデータがあります。ダウンロードは1分ごとに手動で開始されますが、その時点で新しいアレイが古いアレイを置き換えます。 15秒ごとにDOMがクリアされ、配列が反復処理されます。計算とロジックがデータに対して実行され、DOMに挿入されるDOM要素のグループが作成されます。

よりもむしろやって：

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

をどのように私はファッションをブロックなしでそれを実装するのでしょうか？これまでのところ、私は思いつきました：

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

私はそれの周りに頭を上げることはできません。私はデータがperformLogic()の呼び出しの間にダウンロードされた場合、配列の長さがかもしれないことがわかりました。が変更されても、データのグループは同じ配列からのものではありません。

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