JS - 为什么等待在课堂上不起作用

Question

我需要在一个类的函数内等一段时间。我尝试调整Jonas W.回答：https://jsfiddle.net/5wk2cohe/

const sleep = ms => new Promise(res => setTimeout(res, ms));

class K {
  run(n) {
    (async function() {
      document.body.textContent = n;
      await sleep(1000);
    })();
  }
}

var v = new K();
for (let n = 0; n < 4; n++) {
  v.run(n);
}

但是计数会立即提示3.如果我运行https://jsfiddle.net/tctxcn9o/ 我看到一个柜台例外：

const sleep = ms => new Promise(res => setTimeout(res, ms));

 (async function() {
   for(let n = 0; n < 4; n++) {
     document.body.textContent = n;
     await sleep(1000);
   }
})();

我做错了什么？

[更新]一些背景知识：在我的家乡，一个名为JavaKara的非常古老的程序非常受欢迎，可以帮助高中学生学习如何编码：

了解瓢虫的移动方式对于理解和发现错误非常有帮助。所以我想在瓢虫的每一步之后等一段时间。

Answer 1

正如El Aoutar Hamza所述，您正在创建4个异步任务，其中每个任务都立即运行。为了延迟下一个任务，你需要在循环中使用await并使run函数返回一个Promise，如下所示：

const sleep = ms => new Promise(res => setTimeout(res, ms));

class K {
  async run(n) {
    document.body.textContent = n;
    await sleep(1000);
  }
}

(async function() {
  var v = new K();
  for (let n = 0; n < 4; n++) {
    await v.run(n);
  }
})();

Answer 2

在您的第一个示例中，您创建了4个async函数，这些函数彼此无关，因此它们都不必等待另一个函数。

在第二个示例中，您正在创建1 async函数，其中await表达式导致async函数执行暂停，直到履行承诺sleep。