JavaScriptの処理の順序が分からない

Question

for (i = 0; i < 3; i++) {
       panels[i].children[1].addEventListener('click', function() {
         clearTimeout(timers[this.dataset.index]);
         stopCount++;
         if (stopCount === panels.length) {
           stopCount = 0;
           checkResults();
         }
       });
}

<div class="panel">
      <img src="img/seven.png" width="90" height="110">
      <div class="stop" data-index="0">STOP</div>
</div>
<div class="panel">
      <img src="img/seven.png" width="90" height="110">
      <div class="stop" data-index="1">STOP</div>
</div>
<div class="panel">
      <img src="img/seven.png" width="90" height="110">
      <div class="stop" data-index="2">STOP</div>
</div>

JavaScriptのfor文の処理の順序が分かりません。stopCountはどのタイミングで1増えるのでしょうか？

Answer 1

スロットマシンですかね？　panel にはスロットを表示する部分（img）と、ボタン部分（div, これがchildren[1]）があり、このボタン部分に対するイベントの定義をJavaScript がやっています。

そしてそのイベントハンドラの中で stopCount を加算しています。

つまり、stopCount が増えるのは スロットのストップボタンが押されたとき です。

Comments

[takey]

たしかに！スロットマシンぽいですね…

[ryoo_chksl]

回答ありがとうございます。

そうです。スロットマシンです。
ドットインストールを使ってJavaScriptを学習中なのですが、その中のスロットマシンを作る動画の中で分からない部分があったので質問させていただきました。

Answer 2

for が3回まわった後で、<div class="stop" data-index="0">STOP</div> <div class="stop" data-index="1">STOP</div> <div class="stop" data-index="2">STOP</div> をクリックしたタイミングです。

Comments

[ryoo_chksl]

イメージとしては、forが3回まわることで、クリックイベントを発生させる準備が整って、クリックされるごとにstopCountが1ずつ増えていく、という感じですか？

[takey]

そのイメージでOKだと思います。

[kei344]

そうですね。提示されたコードでは同じボタンを3回押しても checkResults(); が実行されます。

[tacsheaven]

ですね。一度押したボタンが押せなくなっているならこれでも問題はないのですが、そのロジックはclick のイベントハンドラにありませんし。

Answer 3

<div class="stop" data-index="0">STOP</div>
<div class="stop" data-index="1">STOP</div>
<div class="stop" data-index="2">STOP</div> がクリックされた時です。
addEventListenerは指定したイベントが起きた時に実行する処理を指定するものです。
指定されているイベントは第一引数で指定されているclickということになります。

Answer 4

一つ一つ理解していきましょう。

stopCount++ が実行されるのは以下の関数が実行されたときです。

                                                      function() {
         clearTimeout(timers[this.dataset.index]);
         stopCount++;
         if (stopCount === panels.length) {
           stopCount = 0;
           checkResults();
         }
       }

ではこの関数がどんなときに呼ばれるか、ということが重要になりますが、 addEventListener という半数の引数になっていることがわかりますか？

panels[i].children[1].addEventListener('click', function() {...});

イベントリスナー、という言葉はご自身で調べていただくとして、 panels[i].children[1] がクリックされたときにこの関数を呼び出してください、と宣言しておく仕組みになります。

panels[i].children[1] が何を意味するのか、考えてみてください。

Comments

[ryoo_chksl]

イメージとしては、forが3回まわることで、クリックイベントを発生させる準備が整って、クリックされるごとにstopCountが1ずつ増えていく、という感じですか？

[mather]

クリックイベントはイベントリスナーが無くても発生しているので、より正しくは「クリックイベントに対して処理するべき関数の定義ができて」クリックするごとに処理が実行される形になります。

Answer 5

このfor文は<div class="stop" data-index="0">STOP</div>をクリックしたときのイベントを登録しているだけなので、このfor文の中ではstopCountの値は増えません。

img/seven.pngの画像をクリックしたときにstopCountの値が1ずつ増えます（stopCount++;）。
画像は3つあると思いますが、3つすべてクリックしたらcheckResults();処理に入ります。