JavaScript是单线程:
同一时间只能干一件事情,只有前面的事情执行完,才能执行后面的事情。导致遇到耗时的任务时后面的代码无法执行,这就会影响到执行过程,致使阻塞。
为了解决这个问题,Js将任务分为了同步与异步
什么是同步任务?
按顺序挨个执行的
console.log(123);
for (let i = 1; i <= 5; i++) {
console.log(i);
}
console.log(456);
先输出123,再输出1,2,3,4,5,最后输出456,按代码从上到下的顺序执行的
什么是异步任务?
首当其冲想到的就得是定时器(setTimeout、setInterval)了吧,当然还有Ajax的数据请求、async-await、promise、读写文件等
setTimeout(()=>{
console.log('定时器');
},0)
console.log(1)
虽然定时器在前,虽然定时器是0s,但由于其属于异步任务,会先存到任务队列中等待执行
同步与异步相遇,优先执行同步任务,所有的同步任务都在主线程上依次执行,形成一个【执行栈】。
执行栈外还有个任务队列:在执行同步任务时也不是对异步置之不理了,异步任务一旦有了运行结果就会在【任务队列】中放置一个事件。当执行栈中的同步任务都执行完了,才会开始读取【任务队列】,看其中有哪些事件,将这些事件放入执行栈开始执行。
怎么执行任务?
在执行异步任务时,还要明白一个概念就是:宏任务与微任务
宏任务有:script标签,setTimeout,setInterval
微任务有:Promise,nextTick
也就是说在在异步任务里也论资排辈的,会先走微任务,再走宏任务
setTimeout(() => {
console.log('定时器');
}, 0)
new Promise((resolve) => {
console.log('同步代码')
resolve('异步代码')
}).then((res) => {
console.log(res);
})
console.log('奥特曼');
输出:同步代码、奥特曼、异步代码、定时器
啥意思呢?
首先最底下的输出是同步无疑,但为啥先输出“同步代码”,不是说promise是异步吗?
promise确实是异步,但new Promise是创建一个构造函数,这个过程是同步的
promise的异步是在说它的回调函数上:.then() .catch()
所以new Promise下的第一层的输出是同步,和最下面的输出同一级别,按照从上到下顺序,所以先执行。
这个时候注意了,就剩下了定时器和Promise的回调函数.then(),那这俩怎么看顺序呢?
就要用到微任务与宏任务的对比了
Promise的回调是微任务,setTimeout的回调是宏任务,所以先执行Promise的代码
最后总结下来就是:同步优先与异步(异步中又分:微任务优先于宏任务)
事件循环?
宏任务里既存在微任务,又存在宏任务。
执行这个宏任务时又要将微任务和宏任务分开,又要来一个任务队列来分装微、宏任务
这个过程就可以叫事件循环
// 一级·异步
setTimeout(()=>{
// 二级·宏任务
setTimeout(()=>{// 二级·宏任务回调
console.log("定时器里的定时器")
},0)
// 二级
new Promise((resolve,reject)=>{
// 同步
console.log("promise")
resolve("promise的resolve");
}).then((res)=>{// 异步·微任务---要给下面的二级同步代码让路
console.log(res)
// 三级·宏任务
setTimeout(()=>{// 三级·宏任务回调
console.log('promise的定时器')
},0)
})
// 二级·同步
console.log('haha')
},0)
// 一级·同步
console.log('111')
输出:111、promise、haha、promise的resolve、定时器里的定时器、promise的定时器
同级宏任务要给微任务让路,次级任务要给上级任务让路(promise定时器vs定时器的定时器)
注意:
两个同级定时器,延迟时间少的会优先放到主线程里执行
两个同级定时器,延迟时间一样的会按顺序执行
练习
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')
})
})
输出:1、7 、6、8、2、4、3、5、9、11、10、12