0

私はJavaScriptをツールとして長年使用していますが、JavaScriptを使用してアプリケーションのプログラミングを開始したのはごく最近のことです。JavaScriptでCrockfordを見た後-レベル6：Loopage私はイベントループとブロックしないスタイルに感謝し始めました。これをよりよく理解するために、私はコードの設計が不適切な領域があると信じているアプリに戻りました。

アプリケーションは、最大20個の要素を含む最大45KBのJSONファイル（縮小、非圧縮）をダウンロードするため、平均して各要素には約2.25KBのデータが含まれます。ダウンロードは毎分行われ、手動でトリガーされます。その時点で、新しいアレイが古いアレイに置き換わります。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()変わる可能性があるため、呼び出しの間にデータがダウンロードされた場合、これは失敗することを私は知っています。

4

1 に答える 1

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);
于 2012-04-04T12:22:29.360 に答える