これらのJavaScriptの行を説明するには？

-3

lightとorderの両方とも、表示される期間の状態を含む配列です。これらのJavaScriptの行を説明するには？

しかし、私はIndexが何をしているのか、それとも何かを知っているわけではありません。誰かがこれを説明できますか？コードは交通信号のシーケンスを変更します。コードは動作しますが、私がそれを変更したときに動作しないので、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>

出典

2017-02-01 user7491934

lightIndexとsIdは、両方のコードを書いた誰によって作成されたばかりの変数名です。彼らは本質的に何かを意味するものではありません。コードの作成者は、必要な変数名を選択できました。しかし、あなたのコードでは、これらの変数の両方が、その名前からかなり自明な使用法を持っています。

lightIndex現在の光（light）はlight = lights[lightIndex];と関連する色にアクセスできるように、アレイlightsの指標として使用される（0と2の間）の整数です。おそらくlightsはvar lights = ['green', 'orange', 'red']のように設定されています。したがって、たとえば、light = lights[lightIndex]はlight = lights[1]になり、lightはorangeと等価になります。

sIdは時間遅れ関数（setTimeout(changeState, order[state][0]);）です。 setTimeout()は、実行する関数とミリ秒単位の時間遅延の2つのパラメータをとります。この例では、order[state][0]は1000（1秒）と等しく、changeState()は実行する関数です。本質的に、1秒ごとに、光の状態を（異なる色に）変えます。

あなたは変化にlightIndexを試してみた理由を私は知らないが、あなたが変化するライトの向きを逆にしたい場合は、forループ逆にする必要があります。

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

になると：

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

速度を変更する場合は、order[state][0]を変更する必要があります。変数のコードorderが表示されないので、自分で変更する方法を検討する必要があります。

希望すると便利です。

出典

2017-02-01 23:13:01

ここに残りのコードがあります – user7491934

これらのJavaScriptの行を説明するには？

答えて

関連する問題