前言
今天看到一道题目,问的是宏任务与微任务,看的是一脸懵逼,于是特意研究了一下,在这里特别感谢https://juejin.im/post/59e85eebf265da430d571f89#heading-0这篇文章,帮我搞懂了js运行机制。
背景
console.log('----------------- start -----------------');
setTimeout(() => {
console.log('setTimeout');
}, 0)
new Promise((resolve, reject) =>{
for (var i = 0; i < 5; i++) {
console.log(i);
}
resolve(); // 修改promise实例对象的状态为成功的状态
}).then(() => {
console.log('promise实例成功回调执行');
})
console.log('----------------- end -----------------');
在理解javascript运行机制前,看到这个题目是一脸蒙蔽,直到了解了宏任务与微任务运行机制,才彻底懂了。
1.关于javascript
首先大家都知道javascript是一门单线程语言,所谓的“多线程”也是用单线程模拟出来的。
2.javascript事件循环
大家都知道js分为单线程与多线程,这里引用大神一张图片:
image.png
文字描述:
- 同步任务和异步任务分别进入不同的场所,同步任务进入主线程,异步任务进入Event Table,并注册函数。
- 当指定的事情完成时,Event Table会将这个函数移入Event Queue。
- 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
- 上述过程会不断重复,也就是常说的Event Loop(事件循环)。
举一个最简单的例子:
setTimeout(()=>{console.log('异步')},0);console.log('同步')
//同步
//异步
- 进入Event Table,并注册。
- 等待0秒以后,Event Table会将这个函数移入Event Queue。
- console.log('同步')
- 主线程执行完毕后,从Event Queue执行console.log('异步')
3.宏任务与微任务
- macro-task(宏任务):包括整体代码script,setTimeout,setInterval
-
micro-task(微任务):Promise,process.nextTick
还是借用大神的图:
image.png - 先顺序执行同步事件即宏任务
- 碰到异步事件将其分类丢入宏任务 Event Queue 和微任务 Event Queue 中
- 等宏任务执行结束后顺序执行完微任务 Event Queue 中任务,第一次循环结束;
- 顺序执行宏任务 Event Queue 中任务,如此往复
最后拿一个例子来解释说明:
setTimeout(function() {
console.log('setTimeout');
})
new Promise(function(resolve) {
console.log('promise');
}).then(function() {
console.log('then');
})
console.log('console');
//promise
//console
//then
//setTimeout
最后
在nodejs中,微任务也是有执行顺序的,不像浏览器是谁先添加就先执行谁;
node中微任务process.nextTick优先于promise.then优先于await
javascript是一门单线程语言
Event Loop是javascript的执行机制
网友评论