> 웹 프론트엔드 > JS 튜토리얼 > JS 이벤트 폴링 메커니즘 설명

JS 이벤트 폴링 메커니즘 설명

小云云
풀어 주다: 2018-03-26 16:33:23
원래의
4334명이 탐색했습니다.

JS는 JS의 이벤트 루프에 대한 심층적인 이해입니다. 이 글은 주로 JS 이벤트 폴링 메커니즘을 여러분에게 공유합니다.

JS 실행 메커니즘(1):

1. 먼저 JS가 동기식인지 비동기식인지 확인합니다. 동기식은 이벤트 테이블에 들어가고

2. 비동기식 작업은 이벤트 테이블에 함수를 등록합니다. 트리거 조건이 충족되면 마지막으로 이벤트 큐에 푸시됩니다

3. 메인 스레드에 들어간 후 동기화 작업이 실행됩니다. 메인 스레드가 유휴 상태가 될 때까지 이벤트 큐로 이동하여 실행 파일이 있는지 확인합니다. 비동기 작업이 있으면 메인 프로세스로 푸시됩니다

JS의 실행 메커니즘(2)

1. 프로세스 중에 마이크로 작업이 발생하면 [이벤트 대기열]에 넣습니다. 마이크로태스크

2. 현재 매크로태스크 실행이 완료된 후 마이크로태스크의 [이벤트 큐]를 확인하고 그 안의 모든 마이크로태스크를 순차적으로 실행합니다

태스크 분할 방법:

1.macro-task (매크로 태스크): script, setTimeout, setInterval

2.micro-task( Microtask): Promise, process.nextTick

작은 질문에서 시작합니다

for (var i=0;i<=5;i++){
    setTimeout(()=>{console.log(i)},1000)
}
로그인 후 복사

출력 결과는 1초 이후 연속으로 6개의 6을 인쇄해야 합니다. 이 질문의 주요 지식 포인트는 블록 수준 범위이지만 이벤트 폴링 메커니즘 소개에 매우 적합합니다. setTimeout은 비동기 작업이므로 즉시 실행되지 않습니다. 즉, 모든 동기 작업이 실행될 때까지 기다려야 합니다. 즉, i가 6이 되면 동시에 6개의 타이머를 실행하기 시작합니다. 시간, 나는 6. 변수의 전역 값을 가리키므로 6을 인쇄하십시오. 이것이 JS 실행 메커니즘입니다. (1)

더 어렵게 하려면 JS 실행 메커니즘을 고려하십시오. (2)

// promise里面的函数是立即执行的// 分别输出 2 3 5 4 1setTimeout(function () {
    console.log(1)
},0);new Promise(function executor(resolve) {
    console.log(2);    for(var i=0;i<10000;i++){
        i==9999 && resolve();
    }
    console.log(3);
}).then(function () {
    console.log(4);
});
console.log(5);
로그인 후 복사

첫 번째 매크로 작업이 실행되었습니다 스크립트여야 하므로 타이머가 점프되고(몇 초 동안 실행을 지연시키더라도) Promise의 콘텐츠를 실행하고 순서대로 실행한 다음 먼저 2를 인쇄하고 for 루프를 수행합니다. 동시에 비동기 실행에 속하는 비동기 콜백 함수입니다. 분할에서 언급했듯이 Promise는 마이크로태스크이므로 마이크로태스크 이벤트 큐는 매크로태스크가 끝나면 지워집니다. 따라서 3, 5 , 그리고 4가 다음에 인쇄됩니다.
이 시점에서 첫 번째 매크로 작업이 처리되었으며 타이머 차례입니다.

위 내용은 JS 이벤트 폴링 메커니즘 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿