【JavaScript】事件轮询

发布时间 2023-11-07 20:41:11作者: unuliha
1、先参考搞懂 JavsScript 异步 —  事件轮询

2、明确几点:
  • setTimeoutDOM EventHttpRequestsetIntervalsetImmediate(Node.js独有)的回调、I/O操作、UI渲染均会被加载到消息队列(macrotask宏任务)。
  • Promise的回调、MutationObserverprocess.nextTick(Node.js独有)会被加载到任务队列(microtask微任务)。
  • 任务队列优先级高于消息队列,也就是微任务优先级高于宏任务。
3、例子
new Promise(function (resolve, reject) {
    resolve();
    setTimeout(function () {
        console.log(1);
    }, 0);
    console.log(2);
}).then(function () {
   	console.log(3);
}).then(function () {
   	console.log(4);
});
console.log(5); // 打印结果:2 5 3 4 1,其中setTimeout被加到消息队列,then回调被加到任务队列,先执行。

setTimeout(() => {
  console.log("200");
}, 200);
setTimeout(() => {
  console.log("100");
}, 100); // 100 200,等待执行的时间越短,越在队列前面,而不管在script中的顺序

setTimeout(() => {
  console.log("2");
}, 2);
setTimeout(() => {
  console.log("1");
}, 1); // 当等待时间过短时,或者说队列里两个item的间隔时间过短时,两者谁先执行并不确定,多数情况下打印1 2,即正常执行,少数情况下会打印 2 1