210402 개발일지(116일차) - javascript 호출 스케줄링 (1) SetTimeout

javascript 호출 스케줄링 관련 setTimeout과 setInterval, requestAnimationFrame에 대해 알아보자.

setTimeout

함수를 당장 실행시키지 않고, 일정시간 후에 작동시키고 싶을 때 쓴다.
일정 시간 이후에 함수가 한번 실행된다. 아래와 같이 사용하면 된다.

setTimeout(func|code, [delay], [arg1], [arg2], ...)

func|code :

실행하고자 하는 함수의 자리

delay :

실행 전 대기시간을 입력하는 자리, ms(밀리초) 단위

arg1, arg2 .. :

함수에 전달할 인자들

setTimeout 활용 및 이해하기

function run() {
  console.log('3');
}
console.log('1');
setTimeout(run, 3000);
console.log('2');

위의 결과는 '1' → '2' →'3' 순으로 출력이 된다. setTimeout에 delay time을 3초를 줬으므로, 응당 그러게 될 것이라고 예상할 수 있다.
그럼, 아래 결과는 어떻게 될까?

function run() {
  console.log('3');
}
console.log('1');
setTimeout(run, 0);
console.log('2');

위와 마찬가지로 '1' → '2' →'3'순으로 출력이 된다. 호출 스택(Call stack), 백그라운드, 태스크 큐(Task queue), 이벤트 루프(Event loop)에 대해 알아보자. 그림 자료는 제로초님 블로그에서 가져왔습니다.

호출 스택에서 실제 함수가 실행된다 ! 는 것을 알아야 합니다.

1. setTimeout()은 실행되자마자 백그라운드로 이동한다.

그 후 3초 후에 태스크 큐에 run 함수를 보낸다.

2. 반드시 호출 스택이 비어져 있어야, 태스크 큐에서 호출 스택으로 실행될 함수가 이동한다.

호출 스택이 비어질 때마다, 이벤트 루프가 지속적으로 태스크 큐에 함수가 쌓여있는지 확인하고 호출스택으로 이동시켜 준다.

위의 이유로 인해, setTimeout에 delay를 0으로 줘도 '1' → '2' →'3' 순으로 출력이 된다.
당연히, delay에 3000(3초)를 줘도 호출 스택에 함수들이 있다면 정확히 3초 후에 원하는 함수가 실행되지 않는다.
다음 포스팅에서는 setInterval에 대해 알아보자.