前言:此文章为是通过看其他博主文章和视频讲解js代码执行机制后整理的,概述的可能不是很准确。
js代码执行顺序是自上而下的,且js的代码分为同步任务和异步任务的。
同步任务:是在主线程上排队执行的任务
异步任务:是不进入主线程,进入‘任务队列’中的任务
同步代码是没有优先级的,按照自上而下的顺序执行;但异步代码是分微任务和宏任务的。
宏任务:script、setTimeout、setInterval、DOM事件、AJAX
微任务:promise.then()、async/await...
---- async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果
async函数返回一个Promise对象,可以使用then方法添加回调函数。当函数执行的时 候,一旦遇到await就先返回,等到异步操作完成,再接着执行函数体后面的语句。(也就是说:当一个函数前加了async,就表示这个函数里很大可能有异步函数,而在第一个await表达式出现之前,异步函数内部的代码都是按照同步方式执行的,await所在表达式是同步的)await会阻塞其所在表达式中后续表达式的执行(在和await在同一个函数内,但在await后面的代码会被阻塞,形成类似微任务的存在)
1、await会阻塞后续代码的执行
<script>
console.log(1111111);
async function text() {
console.log(2222222);
await fn();
console.log(333333333);
}
function fn() {
console.log(55555555);
}
text();
console.log(444444444);
</script>
执行结果:
2、promise是属于同步任务,promise.then()是属于异步任务
<script>
console.log(1111111);
new Promise((resolve, reject) => {
console.log(222222222);
resolve();
}).then(() => {
console.log(33333333);
});
console.log(444444);
</script>
总结:执行机制:宏任务(script)---->宏任务中的同步任务---->微任务---->宏任务---->宏任务中的同步任务---->宏任务中的微任务---->宏任务中的宏任务---->....
<script>
function f2() {
console.log(1);
setTimeout(() => {
console.log(2);
}, 0);
console.log(9)
}
async function f() {
console.log(3);
await f2();
console.log(4);
}
f();
console.log(5);
new Promise((resolve) => {
console.log(6);
resolve();
}).then(() => {
console.log(7);
});
console.log(8);
</script>