如何解释这些 JavaScript 行？答案

【问题标题】：How to explain these lines of JavaScript?如何解释这些 JavaScript 行？
【发布时间】：2017-06-18 13:32:07
【问题描述】：

light 和 order 都是包含状态及其显示时间段的数组。

但是，我不太确定 Index 的作用或“sId”。有人可以解释一下吗？该代码更改了交通信号灯的顺序。该代码有效，但我想知道lightIndex 做了什么，因为当我更改它时它不起作用。

    <!DOCTYPE html>
<html>
<style type="text/css">
.light {
    height: 30px;
    width: 30px;
    border-style: solid;
    border-width: 2px;
    border-radius: 25px;
}
.lightRed {
    background-color: red;
}
.lightYellow {
    background-color: yellow;
}
.lightGreen {
    background-color: green;
}
</style>
<body>
<div id="trafficLight">
    <div>Click to Start and Stop</div>
    <div class="light" id="Red"></div>
    <div class="light" id="Yellow"></div>
    <div class="light" id="Green"></div>
</div>
<button type="button" onclick="changeState()">Change Lights</button>
<button type="button" onclick="changeState()">automatic</button>
<script>
var changeState = (function () {
    var state = 0,
        lights = ["Red", "Yellow", "Green"],
        lightsLength = lights.length,
        order = [
            [7000, "Red"],
            [2000, "Red", "Yellow"],
            [7000, "Green"],
            [2000, "Yellow"]
        ],
        orderLength = order.length,
        lightIndex,
        orderIndex,
        sId;

    return function (stop) {
        if (stop) {
            clearTimeout(sId);
            return;
        }

        var light,
        lampDOM;

        for (lightIndex = 0; lightIndex < lightsLength; lightIndex += 1) {
            light = lights[lightIndex];
            lightDOM = document.getElementById(light);
            if (order[state].indexOf(light) !== -1) {
                lightDOM.classList.add("light" + light);
            } else {
                lightDOM.classList.remove("light" + light);
            }
        }

        sId = setTimeout(changeState, order[state][0]);
        state += 1;
        if (state >= orderLength) {
            state = 0;
        }
    };
}());

document.querySelector('change Lights', 'automatic').addEventListener("click", (function () {
    var state = false;

    return function () {
        changeState(state);
        state = !state;
    };
}()), false);
</script>
</body>
</html>

【问题讨论】：

标签： javascript html css indexing integer

【解决方案1】：

lightIndex 和 sId 都是由编写代码的人创建的变量名。它们本质上并不“意味着”任何东西——代码的创建者可以选择他们想要的任何变量名。但是，在您的代码中，这两个变量的用途从它们的名称中不言而喻。

lightIndex是一个整数（0到2之间），用作数组lights的索引，这样当前的灯光（light）就可以用light = lights[lightIndex];访问相关的颜色。大概lights 的设置类似于var lights = ['green', 'orange', 'red']。因此，例如，light = lights[lightIndex] 变为 light = lights[1]，使 light 变为等价于 orange。

sId 是一个延时函数 (setTimeout(changeState, order[state][0]);)。 setTimeout() 有两个参数——一个要执行的函数和一个以毫秒为单位的时间延迟。在此示例中，order[state][0] 将等价于 1000（一秒），changeState() 是要执行的函数。基本上，每隔一秒，就会改变光的状态（变成不同的颜色）。

我不知道你为什么要尝试改变lightIndex，但是如果你想反转灯光变化的方向，你需要反转for循环：

for (lightIndex = 0; lightIndex < lightsLength; lightIndex += 1) {

变成：

for (lightIndex = lightsLength; lightIndex > 0; lightIndex -= 1) {

如果你想改变速度，你需要改变order[state][0]。由于您没有显示 order 变量的代码，因此您需要自己弄清楚如何更改它。

希望这会有所帮助！

【讨论】：