본문 바로가기

Javascript

동기화 처리

javascript는 비동기방식으로 돌아가므로,


var arr = ['a','b','c'];


for(var i=0; i<arr.length; i++){

console.log(new Date().getTime());

console.log('i='+i);

setTimeout(function(){

console.log(new Date().getTime());

console.log('arr['+ i +']='+arr[i]);

}, 1000);

}


이 소스는 의도한대로 돌아가지 않는다.

1483667885821

i=0

1483667885823

i=1

1483667885824

i=2

1483667886824

arr[3]=undefined

1483667886824

arr[3]=undefined

1483667886825

arr[3]=undefined


그러므로 콜백을 쓰자

var arr = ['a','b','c'];


var timeoutFunc = function(item, i){

setTimeout(function(){

     console.log(new Date().getTime());

console.log('i='+i);

console.log('item['+ i +']='+item[i]);


i++;


if(i < item.length){

timeoutFunc(item, i);

}

}, 1000);

}


timeoutFunc(arr, 0);


결과

1483668114676

i=0

item[0]=a

1483668115680

i=1

item[1]=b

1483668116682

i=2

item[2]=c


ajax로 서버에서 무언가 처리해야할때 응용해서 쓰면 될 것 같다!