1. js中同步异步任务的顺序
首先,我们可以确定js是一门单线程的语言,即能够执行任务的道路只有一条,而这条道路上面改执行怎样的任务,就需要有一个顺序来区分.
js的任务用大的分类可分为同步任务和异步任务,
同步任务:即排队等待,从上往下执行,只有前面的任务完成后,你才能开始任务
异步任务:如果js只有同步的过程,那么意味着,只要有一个任务卡死了,那么你后面的任务都阻塞了,所以异步处理就有了必要性.js的异步处理是通过事件循环实现的(event loop).
一般情况下是同步任务执行完成后才开始执行异步任务
按照这种分类方式:JS的执行机制是
首先判断js代码是同步还是异步,同步就进入主进程,异步就进入event table
异步任务在event table中注册函数,当满足触发条件后,被推入event queue
同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中
以上三步循环执行,这就是event loop
1.1 js异步任务的顺序理解
将js加载执行任务顺序再进一步的划分的话,就必须弄清楚异步任务的执行顺序
异步任务的执行主要是会分为宏任务和微任务
宏任务: setTimeout setInterval setImmediate等甚至还有script
微任务: Promise.then Promise.catch等
一般来说,一段代码函数的执行,便是主线程的一个任务的开始,当任务执行遇到setTimeout等宏任务时,便将宏任务放到宏任务的队列中,遇到微任务,则将其丢到微任务队列中,等主线程任务中执行完成后,再开始判断两个队列的执行顺序.
一开始对比队列时,只要有微任务,优先微任务队列,微任务队列完成后,再开始执行宏任务.
每次宏任务执行完一个后便会检查微任务队列,微任务队列如果有任务,则会优先执行微任务队列的任务,直到目前微任务队列执行完成后,再执行下一宏任务.
语言表述往往比较抽象,举一个实际例子:
(function() {
setTimeout(() => {
console.log(0);
});
new Promise(resolve => {
console.log(1);
setTimeout(() => {
resolve();
Promise.resolve().then(() => {
console.log(2);
setTimeout(() => console.log(3));
Promise.resolve().then(() => console.log(4));
});
});
Promise.resolve().then(() => console.log(5));
}).then(() => {
console.log(6);
Promise.resolve().then(() => console.log(7));
setTimeout(() => console.log(8));
});
console.log(9);
})();
首先先说结果:
1 ,9 ,5 ,0 ,6 ,2 ,7 ,4 ,8 ,3
这个结果的过程需要细说一下,首先执行的是function的主函数,遇到第一个
setTimeout(() => {
console.log(0);
});
放到宏任务队列里面去,然后遇到Promise,
new Promise(resolve => {
console.log(1);
setTimeout(() => {
resolve();
Promise.resolve().then(() => {
console.log(2);
setTimeout(() => console.log(3));
Promise.resolve().then(() => console.log(4));
});
});
Promise.resolve().then(() => console.log(5));
})
由于Promise优先级较高,而且是new promise 会立即执行所以直接执行输出1,再然后遇到setTimeout函数
setTimeout(() => {
resolve();
Promise.resolve().then(() => {
console.log(2);
setTimeout(() => console.log(3));
Promise.resolve().then(() => console.log(4));
});
});
,再将其丢到宏任务队列里面去,再往下执行,遇到Promise.then函数
Promise.resolve().then(() => console.log(5));
将其丢到微任务队列中,然后回到主线程,执行console.log(9), 输出9,执行完成后即该任务完成,然后查看两个任务队列,发现微任务队列有任务,所以执行微任务
Promise.resolve().then(() => console.log(5));
输出5,微任务执行完成后,没有后续微任务了,则开始执行宏任务
setTimeout(() => {
console.log(0);
});
输出0
宏任务执行完成后,回头一瞅,发现还是没有微任务,则继续执行宏任务
setTimeout(() => {
resolve();
Promise.resolve().then(() => {
console.log(2);
setTimeout(() => console.log(3));
Promise.resolve().then(() => console.log(4));
});
});
这个宏任务一进去,看到了resolve,好巧,直接把.then
}).then(() => {
console.log(6);
Promise.resolve().then(() => console.log(7));
setTimeout(() => console.log(8));
});
丢到微任务,再执行,又看到了一个Promise.then
Promise.resolve().then(() => {
console.log(2);
setTimeout(() => console.log(3));
Promise.resolve().then(() => console.log(4));
});
巧了,前面兄弟和你一样,再微任务队列走起,然后宏任务完成,再开始看两个队列,一看,里面微任务里面有两个任务,宏任务都不用看了,先干完微任务再说,第一个微任务
}).then(() => {
console.log(6);
Promise.resolve().then(() => console.log(7));
setTimeout(() => console.log(8));
});
直接先输出6,然后把Promise.then
Promise.resolve().then(() => console.log(7));
丢到微任务里去,又一个setTimeout
setTimeout(() => console.log(8));
宏任务走起,然后这个微任务完了,下一个微任务
Promise.resolve().then(() => {
console.log(2);
setTimeout(() => console.log(3));
Promise.resolve().then(() => console.log(4));
});
老规矩,直接输出2,setTimeout 3丢宏任务,Promise,then 4丢微任务,在执行下一个微任务
Promise.resolve().then(() => console.log(7));
输出7,再看看微任务还有吗,刚刚又来了个
Promise.resolve().then(() => console.log(4));
输出4,然后微任务没了,终于可以开始宏任务了,然后宏任务2连
setTimeout(() => console.log(8));
setTimeout(() => console.log(3));
输出8 ,3
Prefect! 虽然这个文本差点把自己绕进去了,最好旁边用个纸记一下两个队列发生了啥比较好理解.
这些差不多就是宏微任务的顺序了,基本在微任务面前,宏任务就先靠边.
new promise 会立即执行
then会分发到微任务
遇到 console 立即执行
其实还有process.nextTick等微任务,他的优先级比Promise还高.在队列中同样的函数还可以顺序执行,但不同的函数有时候还要判断优先级,执行顺序会更加复杂.
来个复杂例子发散下思维
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
ok 第一篇文章完成
更新补充
实际上,还有一个异步任务那就是async和await,顺序执行是遇到await就会立即执行,类似于new一个promise,但是如果在await函数执行过程中被打断比如遇到另一个await函数,则当前await的后续代码会阻塞,直到执行微任务队列之前会继续执行完成.
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function () {
console.log('setTimeout1');
}, 200);
setTimeout(function () {
console.log('setTimeout2');
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log('then1')
})
new Promise(function (resolve) {
console.log('Promise1');
resolve();
}).then(function () {
console.log('then2')
})
}, 0)
async1();
new Promise(function (resolve) {
console.log('promise2');
resolve();
}).then(function () {
console.log('then3');
});
console.log('script end');
//结果
script start
async1 start
async2
promise2
script end
async1 end
then3
setTimeout2
Promise1
then1
then2
setTimeout1