Question

要了解异步/等待，我试图在settimeout运行和到期后显示一条控制台消息。如何在下面修复我的代码？我有5个settimeout函数，每个函数一旦完成就应该显示各自的消息。

function t1(){
    setTimeout(() => {
    console.log("1")
    }, 1000);
}

function t2(){
    setTimeout(() => {
    console.log("2")
    }, 2000);
}

function t3(){
    setTimeout(() => {
    console.log("3")
    }, 3000);
}

function t4(){
    setTimeout(() => {
    console.log("4")
    }, 4000);
}

function t5(){
    setTimeout(() => {
    console.log("5")
    }, 5000);
}

async function main(){
    await t1();
    console.log("1sec done");
    await t2();
    console.log("2sec done");
    await t3();
    console.log("3sec done");
    await t4();
    console.log("4sec done");
    await t5();
    console.log("Yay! I am all done");
}
main();

Answer 1

您应该使用Promises

function t1(){
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log("1");
        resolve();
      }, 1000);
   });
}

function t2(){
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log("2");
        resolve();
      }, 1000);
   });
}

function t3(){
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log("3");
        resolve();
      }, 1000);
   });
}

function t4(){
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log("4");
        resolve();
      }, 1000);
   });
}

function t5(){
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log("5");
        resolve();
      }, 1000);
   });
}

async function main(){
    await t1();
    console.log("1sec done");
    await t2();
    console.log("2sec done");
    await t3();
    console.log("3sec done");
    await t4();
    console.log("4sec done");
    await t5();
    console.log("Yay! I am all done");
}
main();

Answer 2

您犯了两个错误

首先，您在调用函数await之前正在使用t1,t2,t3...。 await应该用于 Promise （承诺）。
您正在将1000,2000,...传递到setTimeout()。您应该创建一个返回Promise的函数，该函数将在1秒后解决
在该函数返回的承诺之前使用await

let afterOne = (num) => new Promise(res => {
    setTimeout(()=>{
      //log the number passed to function after 1000 ms
      console.log(num);
      //resolve the current promise so then next setTimeout could be set
      res();
   },1000)
  })
async function main(){
    /*This loop does same as
       await afterOne(0);
       await afterOne(1);
       await afterOne(2)
       await afterOne(3);
       await afterOne(4);
    */
    for(let i = 0;i<5;i++){
      await afterOne(i)
    }
}
main();

Answer 3

对于从t1()到t5()的每个函数，您需要确保它们返回Promise，以便一旦相应的{{1} }内部计时器已完成。

通过以这种方式返回setTimeout()对象，您的Promise-> t1()函数有效地变成了t5()方法，这反过来又意味着async前缀将导致await的执行被阻塞，直到每个main()-> t1()函数完成（或“被解析”）为止。

为说明这一点，请考虑以下代码，其中通用t5()函数替换了原始代码中的delay()-> t1()函数：

t5()

在多个settimeout上使用Async / Await

3 个答案: