如何无限循环一个函数（而不是使用常规的for循环）

Question

我有一个代码，它将运行一组20张图像，以使其看起来像一个空闲的精灵在空闲时呼吸。 当它只有一个循环时，这将运行完美。

但是我无法使它无限期地重复该循环。

有没有更清洁，更快捷的方式来执行我的工作？

将其包含在另一个for循环中不起作用。 它以永不加载而结束。

for(let i = 0; i < images.length; i++) {
    window.setTimeout(function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(images[i], 100, 100);
    }, 100 * i);
}

我希望它会无限循环。

Answer 1

摆脱for循环，使用时间间隔（管理“每个时间段执行某事”的标准方法），并管理回调中的i值。

let i = 0;
setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(images[i], 100, 100);
    i++;
    if (i === images.length) i = 0;
}, 100);

Answer 2

我会在async函数中使用while循环， await sa Promise在100毫秒后解析：

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

(async () => {
  let i = 0;
  while (true) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(images[i], 100, 100);
    await delay(100);
    i = (i + 1) % images.length;
  }
})();