JavaScript 이벤트 메커니즘 이해에 대한 자세한 분석

이 기사는 JavaScript 이벤트 메커니즘을 이해하는 데 대한 자세한 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

동기화와 비동기식 분류에 따라

• 먼저 JS가 동기식인지 비동기식인지 확인하고, 동기식이면 메인에 들어갑니다. 프로세스가 비동기적이면 이벤트 테이블에 들어갑니다#🎜 🎜#

• 비동기 작업은 트리거 조건이 충족되면 이벤트 테이블에 함수를 등록합니다. 이벤트 큐

• 메인 스레드에 진입한 후 동기 작업이 실행됩니다. 메인 스레드가 유휴 상태이면 이벤트 큐로 이동하여 실행 파일이 있는지 확인합니다. 비동기 작업이 있으면 메인 프로세스로 푸시됩니다

매크로 작업과 마이크로 작업으로 구분(더 정확하게는)

• macro-task(매크로 작업): 전체 코드 스크립트, setTimeout, setInterval, setImmediate, I/O, UI 렌더링 포함

• 마이크로 태스크(마이크로 태스크): Promise.then, process.nextTick

many Promise는 어딘가에 마이크로 태스크로 표시되어 있지만 이는 사람들이 프로세스가 마이크로 태스크라고 잘못 생각하게 만들기 쉽습니다. 새로운 Promise가 발행되면 마이크로태스크를 수행합니다. 실제로 Promsie.then과 Promise.catch는 마이크로태스크입니다. New Promise는 일반 생성 객체로 취급되므로 여기서는 이 라운드를 실행하기 위해 Promise.then

• 으로 표시합니다. 매크로 작업

• 중에 마이크로 작업이 발생했습니다. 동기 작업인 경우 마이크로 작업의 [이벤트 큐]에 넣고 비동기적으로 넣기 마이크로태스크[이벤트 테이블]에 함수를 등록하고, 실행 조건을 만족시킨 후, 마이크로태스크[이벤트 큐]에 푸시합니다(아직까지 마이크로태스크에 비동기 작업이 있는지는 모르겠습니다)

  #🎜 🎜#

  # 🎜🎜#매크로 작업을 만났을 때 동기 작업이라면 매크로 작업의 [이벤트 큐]에 넣고, 비동기적으로는 매크로 작업 [이벤트 테이블]에 넣고, 등록하세요. 함수를 실행 조건을 충족하고 이를
의 매크로 작업 [이벤트 큐] ]에 푸시합니다. 이 매크로 작업 라운드가 실행된 후, 마이크로 작업의 [이벤트 큐]를 확인하고 그 안에 있는 모든 마이크로 작업을 순차적으로 실행하세요. 매크로 작업 [이벤트 큐]

• # 🎜🎜#관련 지식

JS 단일 스레드, 이 스레드에는 고유한 이벤트 루프가 하나만 있습니다

• #🎜🎜 #하나의 스레드에서 이벤트 루프는 고유하지만 여러 작업 대기열이 있을 수 있습니다(마이크로 작업 대기열은 하나만 있음)

• 작업 대기열은 매크로 작업으로 구분됩니다 queue and micro task queue

그럼 문제는 매크로 작업 대기열이 여러 개인 경우 다음 여행에서는 어떤 매크로 작업을 선택해야 할까요? 위 방법에서는 모든 매크로 작업을 큐로 간주합니다
• Examples

  /* example1 */
  setTimeout(function () {
      console.log(1);
  },7);
  
  new Promise(function (resolve) {
      console.log(2);
      for (var i = 0; i < 10000; i++) {
          i == 99 && resolve();
      }
  }).then(function () {
      console.log(3);
      setTimeout(() => {
          console.log(4);
      });
  })
  
  console.log(5);
  // 2 3 5 （4 7） 后两个数字的顺序与两定时器的delayTime有关，谁先满足触发条件就先输出谁 （html5 标准中，规定delayTime >= 4ms）
  
  /* example2 */
  setTimeout(_ => console.log(4));
  
  new Promise(resolve => {
      resolve()
      console.log(1)
  }).then(_ => {
      console.log(3)
      Promise.resolve().then(_ => {
          console.log('before timeout')
      }).then(_ => {
          Promise.resolve().then(_ => {
              console.log('also before timeout')
          })
      })
  })
  
  console.log(2);
  // 这个也不难，分析分析就出结果了

  finally

결론적으로 신인의 두 번째 질문

#🎜 🎜#

마이크로태스크 이벤트 큐에 비동기 작업이 있나요?

다음 매크로태스크 라운드를 위해 어떤 매크로태스크 이벤트 큐를 가져와야 합니까?
관련 추천:
JavaScript 이벤트 루프 메커니즘 자세히 설명 - 강의 2

# 🎜🎜#

JavaScript 실행 메커니즘 이벤트 및 콜백 함수

위 내용은 JavaScript 이벤트 메커니즘 이해에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!