Vanilla JS 6) call back function - Asynchronous

 

 

 

window 객체

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

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

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

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

 

setTimeout 활용

setTimeout은 낯설게 동작합니다.

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

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

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

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

run();

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

1000 ms = 1초

 

setTimeout 실행 순서

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

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

run();

 

start -> end -> hello codesquad

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

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

function run(){
    
    setInterval(function() {
        var msg = "setInterval function";
        console.log(msg);
    }, 1000);
   
}

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

start -> end -> setInterval function -> setInterval function -> setInterval function -> setInterval function -> ...