微任务和宏任务
- 宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。
2.微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。
- 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。
js执行顺序，（先执行宏任务列，微任务队列）
运行机制
-
在执行栈中执行一个宏任务。
-
执行过程中遇到微任务，将微任务添加到微任务队列中。
-
当前宏任务执行完毕，立即执行微任务队列中的任务。
-
当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。
-
渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）。
微任务：process、nextTick、Mutation、Observer、Promise.then 、catch、finally
宏任务：I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame
代码示例
1.正常循环输出
for(var i=0;i<10;i++){
console.log(i);
}
#0 1 2 3 4 5 6 7 8 9
2.循环里面使用了var，发生了变量提升，相当于这个i是定义在for循环外部的，所以10次循环结束后，定时器执行输出10次外部的i，也就是10个10
for(var i=0;i<10;i++){
console.log(1,i);
setTimeout(function(){
console.log(2,i);
},10)
}
image.png
3.使用块级变量声明let代替var，setTimeOut中每次都有生成一个新的函数，这个函数会拷贝要使用的变量到它的块级作用域里，也就是i，也就是说，每个函数都有一个自己的i，因此会按顺序输出1到10。
for(let i=0;i<10;i++){
setTimeout(function(){
console.log(i);
},10)
}
#0 1 2 3 4 5 6 7 8 9
闭包：内部的setTimeOut里的函数因为作用域继承，还可以访问块级作用域的变量i，也可以访问上一层setTimeOut里函数定义的变量），此时访问的就是闭包
for (let i = 0; i < 10; i++) {
setTimeout(function () {
console.log(1, i);
var k=i+3
setTimeout(function () {//闭包
console.log(2, i);
console.log('k', k);
}, 10)
}, 10)
}
#i : 0 1 2 3 4 5 6 7 8 9
#k: 3 4 5 6 7 8 9 10 11 12
4.拓展（先执行宏任务列，微任务队列）
setTimeout(function () {
console.log(1);
}, 0)
new Promise(function (resolve, reject) {
resolve('成功')
console.log(2);
}).then(
console.log(3)
)
console.log(4);
#2 3 4 1
整个script是个宏任务 它下边的代码都是子任务，这些任务分为宏任务和微任务，其中还可以细分为同步和异步 ，promise是同步任务队列，它的回调 .then . catch .finally 是异步队列。先执行宏任务 再看本次宏任务下是否有微任务，有就执行完毕再开启下一轮的宏任务
setTimeout(function () {
console.log(1);
}, 0)
new Promise(function (resolve, reject) {
resolve('成功')
console.log(2);
}).then(() => {
console.log(3)
})
console.log(4);
#2 4 3 1
console.log(0);
setTimeout(function () {
console.log(1);
}, 0)
new Promise(function (resolve, reject) {
resolve('成功')
console.log(2);
}).then(() => {
console.log(3)
}).then(() => {
console.log(4)
})
console.log(5);
#0 2 5 3 4 1
网友评论