javascript - 在数组中创建循环迭代列表

我目前有这个作为数组：

    const arr = Array.from({ length: 10 }, (_, i) => `1 (${i + 1}).jgp`);

    console.log(arr);

归功于@Ori Drori


我希望此数组按其顺序不断循环，以便输出为：

1（1）.jgp，1（2）.jgp，1（3）.jgp，1（4）.jgp，1（5）.jgp，1（6）.jgp，1（7）.jgp，1 （8）.jgp，1（9）.jgp，1（10）.jgp，1（1）.jgp，1（2）.jgp，1（3）.jgp，1（4）.jgp，1（ 5）.jgp，1（6）.jgp，1（7）.jgp等等....

这样做的目的是，因为我想使用这些图像在HTML5画布中形成动画，从而使其看起来像是循环动画：

const images = Array.from({ length: 41 }, (_, i) => `1 (${i + 1}).jpg`);

let intervalId = setInterval(function () {
  if (images.length === 0){
    clearInterval(IntervalId);
    return;
  }
  // this remove the first image from the array and return it
  let imageName = images.splice(0, 1);
  sendChat(`/set image http://mywebsite/directory/${imageName}`)
}, 300)

请注意sendChat（`/ set图像）是我网站上的预定义变量。关注点不在动画上，我需要有关遍历数组的帮助。

感谢所有帮助，谢谢。

最佳答案

您不需要无限数组。您需要以循环方式迭代索引-每当到达最后一个索引时，您就回到起点。

使用window.requestAnimationFrame()渲染框架，如果runFlag是true，则请求下一个框架。使用remainder operator循环索引：

let runFlag = true;
const loopImages = (i = 0) => requestAnimationFrame(() => {
  console.log(`1 (${i + 1}).jgp`); // render the image

  runFlag && loopImages((i + 1) % 10); // next frame
});

loopImages();

setTimeout(() => runFlag = false, 1000); // demo of stopping the loop