IT web/JavaScript

setTimeout 인자있는 함수 지연 실행

Pina Colada 2015. 7. 20. 16:42

setTimeout 은 원하는 function을 지연실행할 수 있도록 도와준다.


---------------------------------

function printWorld (){

alert("hell world...");

}


setTimeout( printWorld , 1000); //1초 뒤에 실행

----------------------------------



그러면 인자가 있는 function을 지연 실행하려면??

----------------------------------

/**

 * @param{string} param

 */

function printWorld (param){

alert(param);

}

----------------------------------


이건 안된다. 

함수야 실행되겠지만 바로 실행되고

지연 실행되야는건 printWorld의 리턴값인데

printWorld은 아무것도 리턴하지 않으니 

----------------------------------

setTimeout( printWorld("hell world..."), 1000); //안되용

-----------------------------------



자바스크립트 클로저를 여기서 활용한다

내부 temp변수를 참조하는 익명 function을 반환하는 

function을 선언한다.

----------------------------------------

function printWorld(param){

    

    var temp = param;

    

    return function(){

        

        alert(temp);

    };

}


setTimeout ( printWorld("hell world..."), 1000);

setTimeout ( printWorld("cool world..."), 2000);

setTimeout ( printWorld("water world..."), 3000);

----------------------------------------


결과적으로 아래 3개의 함수를 선언해서 호출하는 효과가 일어난다.

function() { alert("hell world...") };

function() { alert("cool world...") };

function() { alert("water world...") };





클로저를 활용하기 싫으면

이렇게 해도 되긴된다.

setTimeout 인자를 문자열로 넘겨버리는 것이다.

----------------------------------------

function printWorld (param){

alert(param);

}


setTimeout( 'printWorld ("hell world")' , 1000); 

setTimeout( 'printWorld ("cool world")' , 2000);

setTimeout( 'printWorld ("water world")' , 3000);

----------------------------------------



끝~~



덤으로 setTimeout은 너무 남발하게되면

타이밍 이슈의 늪에 빠질 수 있으니 주의