[부스트코스] 자바스크립트 window 객체(setTimeout)

window객체

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

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

window는 디폴트에 개념임으로 생략 가능하다.

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

 

 

setTimeout 활용

인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고도한다. 자바스크립트는 함수를 인자로 받을 수 있는 특징이 있다.

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

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

run();
// 1초뒤에 "hello codesquad"가 출력된다.

 

setTimeout 실행 순서

setTimeout의 실행은 비동기(asynchronous)로 실행되어 동기적인 다른 실행이 끝나야 실행된다. 그 전에는 이벤트 큐에 담겨 있다.

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

run();

// 출력 순서
// start
// end
// hello codesquad


// case 2.
function run() {
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);
    }, 1000);
}

console.log("start");
run();
console.log("end");

// 출력 순서
// start
// end
// hello codesquad


// case 3.
function run() {
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);
    }, 1000);
    console.log("run function end");
}

console.log("start");
run();
console.log("end");

// 출력 순서
// start
// end
// run function end
// hello codesquad

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

 

setTimeout과 비슷한 기능으로 setInterval이 있다. setTimeout은 지정된 시간을 기다린 후 작업을 단 한번 수행하는 반면, setInterval은 일정한 시간 간격으로 작업을 반복적으로 수행하기 위해 사용된다.

 

 

[부스트코스 관련 강의 링크]

window 객체(setTimeout) - https://www.edwith.org/boostcourse-web/lecture/16698/

[LECTURE] 1) window 객체(setTimeout) : edwith