javascript - 为车轮游戏优化 Javascript 循环

Question

我正在创建一个游戏，其中灯光围绕圆圈外侧运行，您必须连续三次尝试将灯光停在同一点上。目前，我正在使用以下代码来遍历灯光并将它们“打开”和“关闭”:

var num_lights = 20;
var loop_speed = 55;
var light_index = 0;
var prevent_stop = false; //If true, prevents user from stopping light

var loop = setTimeout(startLoop, loop_speed);

function startLoop() {
    prevent_stop = false;
    $(".light:eq(" + light_index + ")").css("background-color", "#fff");
    light_index++;
    if(light_index >= num_lights) {
        light_index = 0;
    }
    $(".light:eq(" + light_index + ")").css("background-color", "red");
    loop = setTimeout(startLoop, loop_speed);
}

function stopLoop() {
    clearTimeout(loop);
}

在大多数情况下，代码似乎运行良好，但如果我在另一个选项卡中同时运行视频，则灯的打开和关闭似乎有点突兀。任何关于我如何可能加快速度的输入都会很棒。

有关上面代码的示例，请查看此页面:http://ericditmer.com/wheel

Answer 1

当优化的时候首先要看的是不要做任何事情你只需要做一次。从 DOM 中查找元素的成本可能很高，而且您肯定知道自己想要哪些元素，那么为什么不预先获取所有元素并避免多次这样做呢？

我的意思是你应该

var lights = $('.light');

这样你以后就可以说

 lights.eq(light_index).css("background-color", "red");

请务必在一个让 lights 保持在第二个范围内的地方做第一件事。

编辑:根据评论更新。