window 객체(setTimeout)

window 객체

브라우저 개발을 하다 보면, window라는 객체가 있습니다.

window에는 많은 메서드들이 존재하며, 아래처럼 사용할 수 있습니다.

window는 디폴트의 개념이므로 생략할 수 있습니다.

window.setTimeout()
setTimeout() //window는 전역객체라서 생략 가능하다.

setTimeout 활용

setTimeout은 낯설게 동작합니다.

인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고도 합니다.

자바스크립트는 함수를 인자로 받을 수 있는 특징이 있습니다.

참고로 함수를 반환할 수도 있고요.

function run() {
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않습니다.
    }, 1000);
}

run();

setTimeout의 특성을 잘 이해하고, 지연실행이 필요한 경우에 잘 활용하면 좋습니다.

setTimeout 실행 순서

setTimeout의 실행은 비동기(asynchronous)로 실행되어 동기적인 다른 실행이 끝나야 실행됩니다.

function run() {
    console.log("start");
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않습니다.
    }, 1000);
    console.log("end");
}

run();

즉 setTimeout 안의 함수(콜백함수)는 run함수의 실행이 끝나고 나서, (정확히는 stack에 쌓여있는 함수의 실행이 끝나고 나서 실행됨) 실행됩니다.

디버거를 통해서 이를 스스로 직접 확인하는 것이 학습이 도움이 됩니다. 

setTimeout 이 맨나중에 실행되는 이유는 call stack에 setTimeout이 push되고 pop되면 백그라운드에 run함수와 시간(예를들어 3초)가 보내집니다 그리고 백그라운드에서 3초를 세고 테스크큐로 넘어갑니다 이벤트 루프는 항상대기하고 있다가 call stack이 비워지면 테스크 큐에잇는 함수를 call stack으로 하나씩 밀어올립니다 

출처 https://www.zerocho.com/category/JavaScript/post/597f34bbb428530018e8e6e2

setTimeout이 실행되면, setTimeout 안의 익명함수(1번째 인자)는 브라우저(Web API)가 일단 hold하고 있다가, 주어진 시간(2번째 인자) 만큼이 지나면 event queue(혹은 task queue)로 이동해 대기하게 됩니다. event queue에서 계속 대기하고 있다가, call stack이 비워지면, 즉 stack에 아무런 코드도 없는 상황이 되면 그 때 setTimeout 안의 함수가 call stack으로 이동(push)후 실행(pop)되게 됩니다.

"Philip Roberts: What the heck is the event loop anyway?" 영상을 참조하면 좋을 것 같습니다.

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

setInterval 메서드

setInterval은 일정시간마다 반복해서 실행해주는 함수

https://www.w3schools.com/jsref/met_win_setinterval.asp