콜백 큐
콜백 큐에 대한 기본적인 내용을 알고 있다는 전제하에 글 작성을 한다.
콜백 큐에는 세 종류의 큐가 있는데,
Task Queue, Job Queue, Animation Frame이다.
Task Queue
//1 Callback Queue - Task Queue
setTimeout(() => {
console.log("1");
}, 0); //not js, web api
setTimeout(() => {
console.log("2");
}, 10);
//3
console.log("4");
setInterval, setTimeout 등이 해당 큐에 속한다.
콜 스택에 담긴 콘솔출력이 4로 먼저 출력되고,
이후에 Task Queue를 실행시킨다.
Job Queue
//1 Callback Queue - Task Queue
setTimeout(() => {
console.log("1");
}, 0); //not js, web api
setTimeout(() => {
console.log("2");
}, 10);
//2 Job Queue - Microtask Queue
Promise.resolve("hi").then((data) => console.log("3", data));
//3
console.log("4");
비동기 함수인 promise 또한 콜백 큐에 담기지만
큐의 종류가 다르다.
콜 스택이 먼저 실행된 후,
promise가 먼저 실행되는 것을 볼 수 있다.
그리고 이후 setTimeout이 실행된다.
콜백 큐의 우선순위
위 결과에서 볼 수 있듯이(animation은 이 글에서 다루지 않았지만)
세 개의 큐의 우선순위는
Job Queue >>> Animation Frame >>> Task Queue
가 된다.
'Front-end > JavaScript' 카테고리의 다른 글
JS 모듈 2편 - IIFE Module Pattern (0) | 2023.05.22 |
---|---|
JS 모듈 1편 - 모듈의 필요성 (0) | 2023.05.21 |
JS 비동기 6편 - allSettled, any (0) | 2023.04.18 |
JS 비동기 5편 - parallel, race, sequencial (0) | 2023.04.13 |
JS 비동기 4편 - for await of (0) | 2023.04.12 |