JavaScript에서 setTimeout(..., )은 실제로 무엇을 의미합니까? (이벤트 루프 설명!)

JavaScript에서 setTimeout(..., 0ms)은 실제로 무엇을 의미합니까? (이벤트 루프 설명!)

좋아, 이 전체 setTimeout을 0ms로 분석해 보겠습니다. 언뜻 보면 "형, 0ms는 바로 실행된다는 뜻이겠죠?"라고 생각하실 겁니다. 그러나 JavaScript에는 고유한 분위기가 있으며 0ms는 예상만큼 즉각적이지 않습니다. 함께 알아 봅시다.

코드:

우리가 분석하는 코드는 다음과 같습니다.

const promise = new Promise((resolve, reject) => {
  console.log(1); 
  setTimeout(() => { 
    console.log("timerStart");
    resolve("success"); 
    console.log("timerEnd");
  }, 0); 
  console.log(2); 
});

promise.then((res) => {
  console.log(res); 
})

console.log(4);

그리고 출력은?

1  
2  
4  
timerStart  
success  
timerEnd  

중요한 질문: 0ms에 무슨 일이 일어나고 있나요?

setTimeout(() => { ... }, 0)을 보면 내부 코드가 0ms 후에 즉시 실행되는 것처럼 느껴집니다. 하지만 아니요, JavaScript는 "형, 나한테 나만의 시스템이 있으니 차례를 기다리세요!"와 같습니다.

JavaScript 시스템: 이벤트 루프

JavaScript는 코드를 직접 실행하는 것이 아니라 작업을 처리하기 위한 이벤트 루프라는 멋진 시스템을 갖추고 있습니다. 이렇게 생각해보세요:

1. 주요 작업(동기식):
   
   console.log()와 같은 것이 먼저 실행됩니다. 이는 직접적으로 대면하는 작업입니다.

2. 마이크로태스크(약속):
   
   타이머가 있기 전에도 약속은 다음에 옵니다. 마치 VIP ​​티켓을 받은 것 같습니다.

3. 작업 대기열(setTimeout과 같은 타이머):
   
   타이머는 줄 뒤쪽으로 이동하며 마이크로 작업이 완료된 후에만 실행됩니다. 0ms를 줘도 기다립니다.

코드 분석

어떤 일이 일어나고 있는지 단계별로 살펴보겠습니다.

1. 약속이 생성됨:

   • console.log(1)은 즉시 실행됩니다.
   • setTimeout(() => { ... }, 0)이 작업 대기열에 추가됩니다.
   • console.log(2)는 즉시 실행됩니다.

2. 약속 .then():

   • .then() 콜백이 마이크로태스크 대기열에 추가되었습니다.

3. console.log(4):

   • 메인 스크립트의 일부이므로 직접 실행됩니다.

4. 마이크로태스크 실행(VIP):

   • Promise가 해결되므로 .then() 콜백이 "성공"을 기록합니다.

5. 작업 대기열 실행:

   • 마침내 setTimeout 콜백이 차례를 맞이합니다. "timerStart" 및 "timerEnd"를 기록합니다.

0ms가 "지금 당장"을 의미하지 않는 이유는 무엇입니까?

0ms라고 했음에도 불구하고 setTimeout은 항상 연기됩니다. JavaScript는 무슨 일이 있어도 이를 작업 대기열에 푸시합니다. 시스템은 작업 대기열을 터치하기 전에 먼저 모든 동기 작업과 마이크로 작업(약속)을 지웁니다.

간단히 말하면:

0ms는 시간이 아니라 차례를 기다리는 시간입니다.

이렇게 생각해보세요

롤러코스터를 타기 위해 줄을 서 있다고 상상해 보세요.

1. 동기 코드: 패스트트랙 티켓을 구매한 사람들이 먼저입니다. 논쟁의 여지가 없습니다.
2. 약속: VIP 패스를 가진 사람들은 늦게 도착하더라도 다음 줄을 서게 됩니다.
3. 타이머(예: setTimeout): 패스가 없는 일반 사용자입니다. “0ms 기다리세요”라고 말해도 여전히 일반 대기열에 서 있어야 합니다.

최종 출력 요약

코드의 이벤트 순서는 다음과 같습니다.

1. console.log(1)(동기)
2. console.log(2)(동기)
3. console.log(4)(동기)
4. .then()의 "성공"(마이크로태스크)
5. console.log("timerStart") (작업 대기열)
6. console.log("timerEnd") (작업 대기열)

이것이 왜 중요한가요?

0ms가 실제로 어떻게 작동하는지 이해하면 더 나은 비동기 코드를 작성하는 데 도움이 됩니다. 친구가 JavaScript에서 무작위 지연을 디버깅할 때 친구에게 설명하는 것도 멋진 방법입니다.

그러므로 다음에 setTimeout(() => { ... }, 0)이 표시되면 시간에 관한 것이 아니라는 점만 기억하세요. 우선순위입니다!

위 내용은 JavaScript에서 setTimeout(..., )은 실제로 무엇을 의미합니까? (이벤트 루프 설명!)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!