setTimeout과 custom sleep

어찌보면 되게 당연한건데 기본이 부족해서 내가 실수한걸수도있지만..여튼 하나의 이슈를 해결하고 그에대한 정리를 하려한다.

javascript 코드를 짜다보면 일정시간 이후에 실행되었으면..하는 코드가 존재하게된다.

가장 먼저 떠오르는건 setTimeout() 함수다.

setTimeout(function(){
   // 1초 후 작동해야할 코드
       alert("hello world");
   }, 1000);

setTimeout()은 분명 유용한 함수이지만 가끔 의도하는것에 충족하지 못하는 경우가 존재한다.

해당 코드가 1초뒤에 실행되길 바란다면 setTimeout() 함수가 제격이지만 스레드 자체가 1초 동안 블록킹 되기를 바랄땐 사용할만한 함수가 되지 못한다.

setTimeout()은 비동기 이벤트로 실행되는 함수로서 setTimeout() 에 전달된 콜백함수는 1초뒤에 실행되겠지만 setTimeout() 아래에 있는 코드는 곧바로 실행되기때문이다.

setTimeout(function(){
   alert("hello world");
}, 1000);

alert("goodbye world");

코드 진행도중 setTimeout() 함수를 만났을때 스레드 자체가 1초 블록킹이되고 1초가 지난뒤 "hello world"가 찍히고 "goodbye world"가 찍히길 바라는 경우가 있을텐데 이경우엔 setTimeout()이 어울리지 않는다.

(이 예제코드에서야... goodbye 부분을 콜백 안으로 옮기면 되긴한다. 하지만 이건 어디까지나 예제이고 현업에서 저런 문제가 발생할 경우를 빗댄거니 그렇게 이해하자.)

스레드 자체가 블록킹되길 원할때는 그 스레드가 1초간 실행되어야할 함수를 호출해야한다. 구글에 javascript sleep 으로만 검색해도 수천개의 코드가 나오는데 하나를 살펴보자.

function sleep (delay) {
   var start = new Date().getTime();
   while (new Date().getTime() < start + delay);
}

블록킹되길 원하는 시간을 인자로 전달하면 해당 시간만큼 반복문이 돌아서 아래코드가 실행되지않도록 하는 함수다.

sleep(1000);
alert("hello world");
alert("goodbye world");

이렇게 함수를 호출한다면 1초후에 두개의 얼럿이 뜨는걸 볼 수 있다.

내가 굳이 이 포스팅을 작성한 이유는 setTimeout()의 비동기적인 특성을 분명히 알고 있었음에도 불구하고 콜백안에 함수를 작성하여 코드 indent가 깊어지는게 맘에안든다는 이유만으로 sleep을 과하게 남용했고, 이로인해 몇시간을 고생한 이슈가 발생했기때문이다.

화면이 열리고 1초후에 실행되어야할 코드가 있었는데 이런경우엔 두말할거없이 setTimeout()을 이용했으면 아무런 문제가 없었다.

하지만 sleep(1000); 을 호출해버리자 스레드가 sleep을 실행시키느라고 DOM을 그리지못하는 문제가 발생했었다.

2~3시간을 헤맨끝에 sleep()의 문제인걸 파악했고 setTimeout() 으로 교체하여 이슈를 해결하였다. 그리고 그 두개 함수의 차이를 포스팅하며 다시는 같은 실수를 하지말아야겠다고 다짐하는 중이다.

한가지 더 언급하자면 setTimeout()을 꺼렸던 이유중 하나인 indent depth는 콜백을 익명함수로 전달하지않고 미리정의한 함수로 함수명만 인자로 전달해주는 기법을 사용한다면 어느정도 해결이 가능하다.

setTimeout(execute, 1000);
function execute(){
   alert("hello world");
}

이 포스팅을 작성하고 며칠 후 티몬 개발 블로그에 좋은 글이 올라와있는걸 보고 링크를 건다. 1년차 개발자가 이런글을 작성하다니..ㅜㅜ 대단하다..

http://blog.naver.com/tmondev/220937034820