我们知道JavaScript语言是单线程的,至于为啥是单线程?
假设有两个线程,一个在页面上新增一个div,另一个线程在页面上删除div,那最终听谁的?
那JavaScript怎么实现异步的呢?
在JavaScript中,有两类任务:同步任务和异步任务。
同步任务:普通的任务,依次从上往下执行。
异步任务:又分为宏任务、微任务。
宏任务:setTimeout跟setInterval
微任务:Promise().then() 这里要注意一下,Promise方法里面的是同步任务,then里面的才是微任务
执行顺序:先执行同步任务,遇到异步任务,将其放入到宏任务或者微任务队列中,然后优先执行微任务,接下来再去执行宏任务。
例1
console.log(1);
setTimeout(function () {
console.log(2);
}, 0);
setTimeout(function () {
console.log(3);
setTimeout(function () {
console.log(4);
}, 0);
}, 0);
new Promise(function (resolve, reject) {
console.log(5);
resolve();
}).then((res) => {
console.log(6);
new Promise(function (resolve, reject) {
console.log(7);
resolve();
}).then((res) => {
console.log(8);
});
});
new Promise(function (resolve, reject) {
console.log(9);
resolve();
})
.then((res) => {
console.log(10);
})
.then((res) => {
console.log(11);
});
console.log(12);
// 输出 1 5 9 12
// 6 7 10 8 11
// 2 3 4
//解析:原理跟上面一样,不过需要注意的是,8跟11的顺序:,在这里then的层级,将各个Promise里面第一层的then放在一起,第二层的then放在一起,依此类推,
//然后依次执行第一层的,执行完第一层,接下来执行完第二层,依此类推。
//第一层(6,7,10)
//第二层(8,11)
//所以先输出8, 再输出11的。
例2
console.log(1);
async function fn() {
console.log(2);
await console.log(3);
console.log(4); // 这一步,你应该会有问题
}
setTimeout(() => {
console.log(5);
}, 0);
fn();
new Promise((resolve) => {
console.log(6);
resolve();
}).then(() => {
console.log(7);
});
console.log(8);
// 输出:1 2 3 6 8 4 7 5
//解析:async await是Promise的语法糖,只是针对写法上的优化
//下面将async await翻译成Promise:
async function fn() {
console.log(2);
await console.log(3);
console.log(4); // 这一步,你应该会有问题
}
// 等价于
function fn() {
return new Promise((resolve, reject) => {
console.log(2);
resolve(
(() => {
console.log(3);
})() // 立即执行函数
);
}).then(() => {
console.log(4);
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。