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）。

当在嵌套函数中使用异步实现该功能时，如何使它工作？我想避免将所有功能都放在一个大功能中。

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>

异步/等待嵌套函数

1 个答案: