嵌套函数中的异步/等待

Question

我正在尝试显示嵌套倒计时，在两个嵌套循环中实现。

可以在 js.fiddle 中找到完整的工作代码。两个相关部分如下：

function sleep(ms) 
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function main()
{
    while(true)
    {
      clearScreen();

        for (var i = 10; i > 0; i--) 
        {
            print(i);

            await sleep(1000);

            clearScreen();

            for (var j = 3; j > 0; j--) 
            {
                print(j);

                await sleep(1000);

                clearScreen();
            }
        }
    }
}

main();

这按预期工作。但是，当我尝试将最内层循环重构为像这样的单独函数时

async function innerLoop()
{
    for (var j = 3; j > 0; j--) 
    {
        print(j);

        await sleep(1000);

        clearScreen();
    }
}

并在 main() 中调用此函数，但 coutndown 未按预期工作。（对应代码：js.fiddle）。

在嵌套函数中使用 async / await 来实现它时，如何才能使它工作？我想避免将所有内容都放在一个大函数中。

Answer 1

innerLoop() 是一个 async 函数，因此您需要在调用时 await 它：

var containerElement = document.getElementById("container");

function print(string) {
  var textDiv = document.createElement("div");
  textDiv.textContent = string;

  containerElement.appendChild(textDiv);
}

function clearScreen() {
  containerElement.textContent = "";
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  while (true) {
    clearScreen();

    for (var i = 10; i > 0; i--) {
      print(i);

      await sleep(1000);

      clearScreen();

      await innerLoop();  // <-- Await innerLoop()
    }
  }
}

async function innerLoop() {
  for (var j = 3; j > 0; j--) {
    print(j);

    await sleep(1000);

    clearScreen();
  }
}

main()

<!DOCTYPE html>
<html>

<body>

  <div id="container"></div>

</body>

</html>

嵌套函数中的异步/等待

async / wait in nested functions

javascript

wait

async-await

es6-promise