2012-04-04 1 views
0

저는 지난 몇 년 동안 JavaScript를 도구로 사용해 왔지만 최근에는 그 응용 프로그램을 프로그래밍하기 시작했습니다. Crockford on JavaScript - Level 6: Loopage을보고 난 후 이벤트 루프와 차단하지 않는 스타일에 감사하기 시작했습니다. 이 문제를 잘 파악하기 위해 나는 심하게 설계된 코드 영역이 있다고 생각하는 앱으로 돌아갔습니다.없음 블로킹 setTimeout (fn, 0)

응용 프로그램은 ~ 20KB 요소를 포함하는 ~ 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() 호출 사이에 다운로드되면이 작업이 실패합니다.

답변

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