【学习笔记】for、forEach会不会被await阻塞

思考

如果在循环遍历里加await，执行语句会等待吗？

分析

常用循环是for和forEach
分别尝试

for

/** 打印函数 **/
function printFn(str,t=100) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('this is setTimeout, time is '+t+'ms, and str is '+str);
            resolve(true);  // 打印完后返回 true
        }, t);
    });
}

/** 使用 async 函数来调用打印函数 **/
const main = async()=> {
  for(let i=1;i<4;i++){ // for
    console.log('for'+i)
    const res = await printFn('for'+i, (4-i)*1000) // 延迟时间是逆序，分别是3000,2000,1000
    console.log(res)
  }
}

// 调用主函数
console.log('--main--')
main();

结果很明显，for循环等待await执行完成才会继续

--main--
for1 # 全部顺序
Promise {<pending>} # main() 可忽略
this is setTimeout, time is 3000ms, and str is for1
true
for2
this is setTimeout, time is 2000ms, and str is for2
true
for3
this is setTimeout, time is 1000ms, and str is for3

await

/** 打印函数 **/
function printFn(str,t=100) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('this is setTimeout, time is '+t+'ms, and str is '+str);
            resolve(true);  // 打印完后返回 true
        }, t);
    });
}

/** 使用 async 函数来调用打印函数 **/
const main = async()=> {
  [1,2,3].forEach(async i=>{
    console.log('each'+i)
    const res = await printFn('each'+i, (4-i)*1000); // 延迟时间是逆序，分别是3000,2000,1000
    console.log(res);
  })
}

// 调用主函数
console.log('--main--')
main();

结果很明显，forEach不会等待await

--main--
each1 # 此处顺序，1,2,3
each2
each3
Promise {<pending>} # main() 可忽略
this is setTimeout, time is 1000ms, and str is each3 # 此处是逆序，3,2,1
true
this is setTimeout, time is 2000ms, and str is each2
true
this is setTimeout, time is 3000ms, and str is each1
true

前面顺序输出，后面输出也是按照time顺序，说明forEach(exeFn)中的多个exeFn是异步的。

总结

for循环会等待await返回，[].forEach()不会。

/** 打印函数 **/
function printFn(str,t=100) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('this is setTimeout, time is '+t+'ms, and str is '+str);
            resolve(true);  // 打印完后返回 true
        }, t);
    });
}

/** 使用 async 函数来调用打印函数 **/
const main = async()=> {
  // for循环会被阻塞 
  for(let i=3;i>0;i--){
    console.log('for'+i)
    const res = await printFn('for'+i, i*1000)
    console.log(res) // 等待await返回，才会继续执行，进入下一个for
  }
  // forEach不会阻塞
  [1,2,3].forEach(async i=>{
    console.log('each'+i)
    const res = await printFn('each'+i, i*1000);
    console.log(res); // 不会等待await返回，直接进入下一个
  })
}

// 调用主函数
console.log('--main--')
main();