이벤트 루프 메커니즘

면책 조항 :이 문서는 블로거 원본입니다은 허용 블로거없이 복제 할 수 없다. https://blog.csdn.net/u012193330/article/details/68942008

우리는 자바 스크립트의 주요 기능은 단일 스레드 것을 알고,이 스레드는 하나의 이벤트 루프가 있습니다. 또한 자바 스크립트 코드 실행 함수를 얻기 위해 자신의 실행 순서에 추가 함수 호출 스택,하지만 몇 가지 추가 코드를 수행 얻을 수있는 작업 큐 (작업 큐)에 의존한다.

여기에 설명 된 사진을 쓰기

큐 데이터 구조

스레드는 이벤트 루프는 고유하지만 작업은 다중 큐를 가질 수 있습니다.
작업 큐가 최신 표준에, 매크로 작업 (매크로 작업) 및 마이크로 작업 (마이크로 작업)으로 나누어 져 있습니다, 그들은 작업 및 작업이라고합니다.
아마도 포함하는 매크로 작업 : 스크립트 (전체 코드)의 setTimeout, setInterval을, setImmediate, I / O, UI 렌더링.
마이크로 작업이 약이 포함 process.nextTick, 약속, Object.observe (구식), MutationObserver을 (HTML5의 새로운 기능)
에서는 setTimeout / 약속과 우리는 작업 소스를 호출합니다. 작업 큐에 할당 된 특정 작업입니다.
순서 매크로 작업 실행 큐 : 스크립트 (전체 코드) ->에서는 setTimeout (setInterval을 상동) -> setImmediate의
마이크로 작업 큐의 실행 순서 : (다음) process.nextTick-> 약속

작업을 수행하는 경우 setTimeout, 그것은 여전히 함수 호출 스택을 이용하여 수행하고, 태스크가 해당 큐에 분배 될 태스크 디스패처가 발생된다.

모든 작업이 완료 후에 만 다시 마이크로 작업 큐를 시작합니다의 setTimeout. 그리고 모든 실행 마이크로 작업을 취소합니다.

완료된 마이크로 setTiemout 큐 태스크를 생성 한 후, 다시 그 다음 루프는 setImmediate 큐를 시작한다. 여전히 작업 실행 큐 setImmediate 먼저 완료 한 후, 마이크로 생성 작업을 수행한다.

큐가 생성 된 실행 setImmediate 마이크로 모든 작업을 수행 할 경우, 사이클의 두 번째 라운드는 끝난다.

우리는 여기에 사이클 시간 노드의 끝을주의해야합니다.
우리의 setTimeout의 setTimeout 작업의 구현에서 발생하는 경우, 아직 갈에 해당하는 작업 큐의 setTimeout을 분산되지만 작업은 이벤트 루프의 다음 라운드가 실행될 때까지 기다려야 할 것입니다. 케이스는 복잡한 중첩을 포함하지 않았다, 우리는 추가 또는 변경주기를 느낄 수있는 자신의 위치를 수정 시작할 수 있습니다.

예 1 :

console.log('golb1');

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');
})
new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

setTimeout(function() {
    console.log('timeout2');
    process.nextTick(function() {
        console.log('timeout2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise');
        resolve();
    }).then(function() {
        console.log('timeout2_then')
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');
})
new Promise(function(resolve) {
    console.log('glob2_promise');
    resolve();
}).then(function() {
    console.log('glob2_then')
})

setImmediate(function() {
    console.log('immediate2');
    process.nextTick(function() {
        console.log('immediate2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise');
        resolve();
    }).then(function() {
        console.log('immediate2_then')
    })
})

여기에 설명 된 사진을 쓰기

예 2 :

setTimeout(function() {
    console.log(1);
    setTimeout(function() {
        console.log(2);
    }, 0);
    process.nextTick(function() {
        console.log(5);
        process.nextTick(function() {
            console.log(6);
        });
    });
}, 0);
process.nextTick(function() {
    console.log(3);
    process.nextTick(function() {
        console.log(4);
    });
    setTimeout(function() {
        console.log(7);
    }, 0);
});

결과 : 3417562

참고 기사 : http://www.jianshu.com/p/12b9f73c5a4f

이벤트 루프 메커니즘

추천