[JavaScript] window객체(setTimeout)

window 객체

window에는 많은 메서드들이 존재하며, window는 default의 개념이므로 생략할 수 있다.

window.setTimeout();
setTimeout();

setTimeout 활용

setTimeout은 비동기로 실행되어 동기적인 다른 실행이 끝나야 실행된다.

자바스크립트는 함수를 인자로 받을 수 있으며, 함수를 반환할 수도 있다.

아래의 코드는 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고 한다.

function run() {
    console.log("start");
 
    setTimeout(function() {
        var msg = "hello";
        console.log(msg);
        console.log("run ....ing");
    }, 1000);
 
    console.log("end");
}
run();

위의 두 코드를 실행해보면 다음과 같은 결과가 나온다.

function run() {
    setTimeout(function() {
        var msg = "hello";
        console.log(msg);
    }, 1000);    
    console.log("run end");    
}
console.log("start");
run();
console.log("end");

즉, setTimeout 안의 함수(콜백함수)는 run함수의 실행이 끝나고 나서, 실행된다.

(정확히는 stack에 쌓여있는 함수의 실행이 끝나고 나서 실행된다.) 

지연실행이 필요한 경우에 활용할 수 있다.

setTimeout이 실행되면, setTimeout 안의 익명함수(1번째 인자)는 브라우저가 일단 hold하고 있다가,

주어진 시간(2번째 인자)만큼이 지나면 event queue(혹은 task queue)로 이동해 대기하게 된다.

event queue에서 계속 대기하고 있다가, call stack이 비워지면 setTimeout 안의 함수가 call stack으로 이동 후 실행되게 된다.

※ callback 함수

보통은 즉시 실행되지 않고, 나중에 필요한 시점에 실행되거나, 실행이 안 될 수도 있다.

참고자료

https://www.edwith.org

https://www.youtube.com/watch?v=8aGhZQkoFbQ