javascript - 使用 shift() 和 push() 循环数组值与使用计数器变量相比，最佳方法是什么？

Question

我正在动画帧数组中循环浏览一组图像。一共有7张图片，从1-7循环完成动画。我需要这个动画无限循环，但我想知道以下哪种是最好的方法:

通过修改数组循环

/* Pull image from start of array. */
var image = frames.shift();
/* Process image. */
...
/* Add image back to end of array. */
frames.push(image );

使用计数器变量循环

/* Pull image by counter offset. */
var image = frames[counter];
/* Process image. */
...
/* Increment or reset counter value. */
counter + 1 === frames.length ? counter = 0 : counter = counter + 1;

我选择一个而不是另一个有什么理由吗？或者，有更好的方法吗？

Answer 1

与简单地使用变量来跟踪您在数组中的位置相比，修改数组的代价更高。 如果你无限循环，更好的方法似乎只是使用 while 循环(而不是使用 for在您重置内部计数器的位置循环):

var i = 0;
while (true) {
    doSomething to array[i];

    i = (i+1) % array.length;
}

但是如果您的目标真的是让动画在每次给定的时间间隔过去时无限期地进行，那么循环根本不理想。使用 setInterval相反。

var frames = ...; //your images
var i = 0;
function animate() {
    do something to frames[i];
    i = (i+1) % array.length;
}

setInterval(animate, time_between_runs);

其中 time_between_runs 是再次调用该函数之前应该耗时。