JavaScript事件循环机制

最新推荐文章于 2024-08-04 11:23:30 发布

ZhaoYLi

最新推荐文章于 2024-08-04 11:23:30 发布

阅读量125

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/miss_zxm/article/details/84112499

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列（task queue）来搞定另外一些代码的执行。

一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。
任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。
macro-task大概包括：script（整体代码），setTimeout, setInterval, setImmediate, I/O, UI rendering。
micro-task 大概包括：process.nextTick, Promise, Object.observe（已废弃），MutationObserver（html5新特性）。

setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的具体执行任务。

 // setTimeout中的回调函数才是进入任务队列的任务
 setTimeout(function() {
     console.log('xxxx');
 })
 // setTimeout作为一个任务分发器，这个函数会立即执行，而它所要分发的 任务，也就是它的第一个参数，才是延迟执行

来自不同任务源的任务会进入到不同的任务队列。其中setTimeout与setInterval是同源的。
事件循环的顺序，决定了JavaScript代码的执行顺序。它从script（整体代码）开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空（只剩全局），然后执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次从macro-task开始，找到其中一个任务队列执行完毕，然后再执行所有的micro-task，这样一直循环下去。
其中每一个任务的执行，无论是macro-task还是micro-task，都是借助函数调用栈来完成。

例如：

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')
    })
})

上例执行流程如下：
一、宏任务script首先执行。全局入栈。glob1输出。
在这里插入图片描述
二、执行过程遇到setTimeout。setTimeout作为任务分发器，将任务分发到对应的任务队列中。

三、执行过程中遇到setImmediate。setImmediate也是一个宏任务分发器，将任务分发到对应的任务队列中。setImmediate的任务队列会在setTimeout队列的后面执行。
在这里插入图片描述
四、执行遇到nextTick，process.nextTick是一个微任务分发器，它会将任务分发到对应的微任务队列中去。

五、执行遇到Promise。Promise的then方法会将任务分发到对应的微任务队列中，但是它构造函数中的方法会直接执行。因此，glob1_promise会第二个输出。
在这里插入图片描述