JavaScript 이벤트 메커니즘 이해에 대한 자세한 분석-JS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-08-27 10:44:12

원래의

1266명이 탐색했습니다.

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

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

먼저 JS가 동기식인지 비동기식인지 확인하고, 동기식이면 메인에 들어갑니다. 프로세스가 비동기적이면 이벤트 테이블에 들어갑니다#🎜 🎜#
비동기 작업은 트리거 조건이 충족되면 이벤트 테이블에 함수를 등록합니다. 이벤트 큐
메인 스레드에 진입한 후 동기 작업이 실행됩니다. 메인 스레드가 유휴 상태이면 이벤트 큐로 이동하여 실행 파일이 있는지 확인합니다. 비동기 작업이 있으면 메인 프로세스로 푸시됩니다

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

macro-task(매크로 작업): 전체 코드 스크립트, setTimeout, setInterval, setImmediate, I/O, UI 렌더링 포함
마이크로 태스크(마이크로 태스크): Promise.then, process.nextTick

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

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

# 🎜🎜#관련 지식

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

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