4 min to read

浅谈Javascript中的EventLoop机制

浅谈Javascript中的 EventLoop机制

Featured image

一直对JavaScript的运行机制不甚了解，看了一篇文章描述的很仔细，就弄了点干货下来

javascript 是一门单线程的非阻塞的脚本语言，js 任务也要按顺序一个一个顺序执行。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此任务分为两类：同步任务 和 异步任务

任务导图

导图要表达的内容用文字来表述的话：

关于setTimeout

延迟执行方法 setTimeout 一般用于延迟执行，有时明明写的延时3秒，实际却5，6秒才执行函数，这又咋回事？ 正常情况下是这样的：

setTimeout(() => {
	task()
}, 3000)
console.log('执行console')

// 执行console
// task()

通常会遇到这样的：

setTimeout(() => {
    task()
},3000)

sleep(10000000)

乍一看其实差不多嘛，但我们把这段代码在 chrome 执行一下，却发现控制台执行 task() 需要的时间远远超过3秒，说好的延时三秒呢？ 这时候我们需要重新理解setTimeout的定义。我们先说上述代码是怎么执行的：

上述的流程走完，我们知道 setTimeout 这个函数，是经过指定时间后，把要执行的任务(本例中为task())加入到 Event Queue 中，又因为是单线程任务要一个一个执行，如果前面的任务需要的时间太久，那么只能等着，导致真正的延迟时间远远大于3秒。 我们还经常遇到 setTimeout(fn,0) 这样的代码，0秒后执行又是什么意思呢？是不是可以立即执行呢？ 答案是不会的，setTimeout(fn, 0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思就是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行。关于 setTimeout，即便主线程为空，0毫秒实际上也是达不到的。根据HTML的标准，最低是4毫秒

关于 setInterval

都已经涉及到 setTimeout 了，那也说说和 setTimeout 相似的 setInterval 吧！ 他俩差不多，只不过 setInterval 是循环的执行。对于执行顺序来说，setInterval 会每隔指定的时间将注册的函数置入Event Queue，如果前面的任务耗时太久，那么同样需要等待 唯一需要注意的一点是，对于 setInterval(fn, ms) 来说，我们已经知道不是每过ms秒会执行一次 fn，而是每过ms秒，会有 fn 进入Event Queue。一旦 setInterval 的回调函数fn执行时间超过了延迟时间ms，那么就完全看不出来有时间间隔了

关于 Promise 与 process.nextTick(callback)

传统的定时器我们已经研究过了，接着我们探究Promise与process.nextTick(callback)的表现 Promise的定义和功能本文不再赘述，不了解的可以学习一下阮一峰老师的 Promise。而 process.nextTick(callback) 类似node.js版的 setTimeout，在事件循环的下一次循环中调用 callback 回调函数

我们进入正题，除了广义的同步任务和异步任务，我们对任务有更精细的定义：

不同类型的任务会进入对应的Event Queue，比如setTimeout和setInterval会进入相同的Event Queue

事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。我们用文章最开始的一段代码说明：

setTimeout(function() {
    console.log('setTimeout');
})

new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then')
})
console.log('console')

事件循环，宏任务/微任务的关系如图所示： 宏任务/微任务 导图

例子1：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

第一轮事件循环流程分析如下：

宏任务Event Queue 微任务Event Queue
setTimeout1 process1
setTimeout2 then1

好了，第一轮事件循环正式结束，这一轮的结果是输出1，7，6，8。那么第二轮时间循环从setTimeout1宏任务开始：

宏任务Event Queue 微任务Event Queue
setTimeout2 process2
  then2
宏任务Event Queue 微任务Event Queue
  process3
  then3

整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。(node环境下的事件监听依赖libuv与前端环境不完全相同，输出顺序可能会有误差)

例子2：

const first = () => (new Promise((resovle,reject)=>{
    console.log(3);
    let p = new Promise((resovle, reject)=>{
         console.log(7);
        setTimeout(()=>{
           console.log(5);
           resovle(6); 
        },0)
        resovle(1);
    }); 
    resovle(2);
    p.then((arg)=>{
        console.log(arg);
    });

}));

first().then((arg)=>{
    console.log(arg);
});
console.log(4);

第一轮事件循环

第二轮事件循环

原文链接：