入力内容
HTML

CSS

JavaScript


先ほどまでだと、setInterval 関数が複数回呼び出され、バグが発生していましたが、今回は変数「moving」を使い、moving が false の状態の時のみ start 関数が動くようにすることで、複数回 setInterval 関数が呼び出されるバグを防止しています。
つまりは、スタートとストップが交互に動くように、変数「moving」に start が呼び出されたら「true」に、stop が呼び出されたら「false」とし、「moving」を見ることで、今がどの関数が呼び出されたあとか確認できるようにしています。そして「moving」の状態でそれぞれの関数を動かすか、動かさないかの決定をしています。こうすることで、連続で同じ関数が呼び出されないようにしています。
つまりは、スタートとストップが交互に動くように、変数「moving」に start が呼び出されたら「true」に、stop が呼び出されたら「false」とし、「moving」を見ることで、今がどの関数が呼び出されたあとか確認できるようにしています。そして「moving」の状態でそれぞれの関数を動かすか、動かさないかの決定をしています。こうすることで、連続で同じ関数が呼び出されないようにしています。