标签:let run 多层 循环 调用 封装 res console rom
循环下的异步
let inner = [‘in1‘,‘in2‘,‘in3‘];
function runTask(){
console.log(‘任务开始‘)
for (let index = 0; index < inner.length; index++) {
const i = inner[index];
setTimeout(() => {
console.log(`inner里的${i}完成`)
}, 100);
}
console.log(‘任务完成‘)
}
runTask()
/*
任务开始
任务完成
inner里的in1完成
inner里的in2完成
inner里的in3完成
*/
使用for
循环同步
let inner = [‘in1‘,‘in2‘,‘in3‘];
async function runTask(){
const timeout = (i)=>{
return new Promise(res=>{
setTimeout(() => {
console.log(`inner里的${i}完成`)
res()
}, 100);
})
}
console.log(‘任务开始‘)
for (let index = 0; index < inner.length; index++) {
const i = inner[index];
await timeout(i)
}
console.log(‘任务完成‘)
}
runTask()
/*
任务开始
inner里的in1完成
inner里的in2完成
inner里的in3完成
任务完成
*/
forEach
使用await无效:由于在foreach
中已经完成了一次对于循环的封装,当 使用foreach
时其实也就相当于调用了一个封装了while
或者for
循环的函数,这个函数本身并没有使用async/await来处理异步,所以使用时在回调函数里面加上async/await
是没有作用的
let inner = [‘in1‘,‘in2‘,‘in3‘];
function runTask(){
const timeout = (i)=>{
return new Promise(res=>{
setTimeout(() => {
console.log(`inner里的${i}完成`)
res()
}, 100);
})
}
console.log(‘任务开始‘)
inner.forEach(async (i)=>{
await timeout(i)
})
console.log(‘任务完成‘)
}
runTask()
/*
务开始
任务完成
inner里的in1完成
inner里的in2完成
inner里的in3完成
*/
多层循环下使用同步
let outer = [‘out1‘,‘out2‘,‘out3‘],inner = [‘in1‘,‘in2‘,‘in3‘];
async function runTask(){
const timeout1 = (outer) => {
return new Promise(res => {
setTimeout(() => {
//console.log(out)
res()
}, 1000);
})
}
const timeout2 = (inner)=>{
return new Promise(res=>{
setTimeout(()=>{
//console.log(inner)
res()
},500)
})
}
console.log(‘任务开始‘)
for (let index = 0; index < outer.length; index++) {
const o = outer[index];
for (let index = 0; index < inner.length; index++) {
const i = inner[index];
await timeout1(i)
console.log(`inner里的${i}完成`)
}
await timeout2(o)
console.log(`outer里的${o}完成`)
}
console.log(‘任务完成‘)
}
runTask()
/*
任务开始
inner里的in1完成
inner里的in2完成
inner里的in3完成
outer里的out1完成
inner里的in1完成
inner里的in2完成
inner里的in3完成
outer里的out2完成
inner里的in1完成
inner里的in2完成
inner里的in3完成
outer里的out3完成
任务完成
*/
标签:let run 多层 循环 调用 封装 res console rom
原文地址:https://www.cnblogs.com/EricZLin/p/13939633.html