Question

light和order都是包含状态的数组，其中包含显示它们的时间段。

但是我不太确定索引做了什么或者是什么＆＃39;。有人可以解释这些吗？代码改变了交通信号灯的顺序。代码有效但我想知道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>

Answer 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，但如果您想要改变灯光方向的变化，则需要反转{{1} } loop：

for

变为：

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

如果您想更改速度，则需要更改for (lightIndex = lightsLength; lightIndex > 0; lightIndex -= 1) {。由于您没有显示order[state][0]变量的代码，因此您需要了解如何自行更改。

希望这有帮助！

如何解释这些JavaScript行？

1 个答案: