因为 js 是单线程,所有的同步任务要等前一个任务执行完毕,再执行下一个任务。
function fn1() {
console.log("fn1")
fn2()
fn3()
}
function fn2() {
console.time()
for (let i = 0; i < 1000; i++) {
console.log("fn2 repeat");
}
console.timeEnd()
}
function fn3() {
console.log("fn3")
}
fn1()
但是异步任务并不是这样的。
function fn1() {
console.log("fn1")
fn2()
fn3()
}
function fn2() {
setTimeout(() => {
console.log("fn2");
}, 0);
}
function fn3() {
console.log("fn3")
}
fn1()
使用 Promise
实现在异步代码执行完毕之后,在执行后续代码
function fn1() {
console.log("fn1")
fn2().then(() => {
fn3()
})
}
function fn2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("fn2");
resolve()
}, 1000);
})
}
function fn3() {
console.log("fn3")
}
fn1()
添加 async / await
美化 Promise
async function fn1() {
console.log("fn1")
await fn2()
fn3()
}
function fn2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("fn2");
resolve()
}, 1000);
})
}
function fn3() {
console.log("fn3")
}
fn1()