我正在尝试显示一个嵌套倒计时，在两个嵌套循环中实现。
完整的工作代码可以在 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() 内调用此函数倒计时没有按预期进行。 (对应代码:js.fiddle)。
在嵌套函数中使用 async/await 来实现这一点时，如何使 async/await 工作？我想避免将所有内容都集中在一个大函数中。
最佳答案
innerLoop() 是一个异步函数，因此您需要在调用时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>关于javascript - 嵌套函数中的异步/等待，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60473879/