Question

我目前将此作为数组：

＆＃13;

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

＆＃13;

Credit to @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 image是我网站上的预定义变量。关注的不是动画，我需要帮助循环播放数组。

感谢所有帮助，谢谢。

Answer 1

您可以在柜台上使用闭包，并使用reminder operator %进行调整。

function loop() {
    var i = 0;
    return function () {
        console.log(`1 (${++i}).jgp`);
        i %= 10;
    };
}

setInterval(loop(), 200);

Answer 2

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

使用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

在数组

2 个答案: