JavaScriptのclearInterval
ブラウザゲームを作るためにJavaScriptを勉強し始めたのですが、「 setInterval で繰り返し処理を動かすことに成功した！」と感動したのも束の間に、今度は【 clearInterval 】が効いてくれずに処理が延々と繰り返される問題に直面しました。。。
このページでは私の様に「JavaScriptに関して初級者中の初級者だよ！」という方が、同じように clearInterval で苦しんでほしくないと思い、clearInterval が動かない時の解決策を書いております！！
プログラミング関係
止まらない繰り返し処理
まず最初に作ったのはざっくりとこんな感じの陥りがちな間違ったコードでした。
「button」が押されたら setInterval で１秒ごとに repeat() が繰り返し処理されるようにしたつもりでした。
<body>
<button id="button" onclick="repeat()">スタート！</button>
</body>
<script>
function repeat(){
setInterval(function(){count,1000);
}
function count(){
～～～やりたい処理～～～
}
function stop(){
clearInterval(count)
}
</script>
今は分かりますよ、違うんでしょ？（笑）
一般的な解決策もダメ
先述したコードではまったく clearInterval が効いてくれなかったので色々ググって調べました。
調べ始めて早々に「 let = 」で setInterval を定義だかなんだかをして、定義したそいつをclearIntervalで止めたらいいことが分かりました。
なので<Script>内のコードを以下のように書き換えました。
<script>
function repeat(){
let tomare = setInterval(function(){count,1000);
}
function count(){
～～～やりたい処理～～～
}
function stop(){
clearInterval(tomare)
}
</script>
でも止まらない
グローバル変数！？
letで定義した setInterval を clearInterval で止めたつもりが止まらない。。。
JavaScript先生は大文字と小文字を区別して認識するらしいので、そのあたりを再確認したけど間違いはなさそう。。。
初心者が陥りやすいらしいセミコロン（これ→「 ; 」）の付け忘れもなく、ちゃんと付いてる。。。
じゃあ、なにが間違っているのかと思い悩んだ末に「 とある function 内で let で定義したヤツは、他の function をまたいで使えるのか？」という疑問にたどり着きました！
そこで、調べてみるとどうやら基本的には function をまたいで使えないということが判明しました！！！
ではどうすれば function をまたいで使えるようになるかというと、小題にも書いたグローバル変数です。
ついに止まった！
繰り返し処理をするために setInterval の存在にたどり着くまでも長かったのですが、clearInterval で繰り返しを止めるまでの道のりもすごく長かった。。。
最終的には前項の終わりに書いたグローバル変数として tomare を定義して無事に解決しました。
グローバル変数は私がざっくりと学んだ感じでは「とにかく function の外で定義すればどこでも使える」という定義の仕方らしいです。
一応たどり着いたコードを書いておきます、こんな感じ↓↓
<script>
let tomare;
function repeat(){
tomare = setInterval(function(){count,1000);
}
function count(){
～～～やりたい処理～～～
}
function stop(){
clearInterval(tomare)
}
</script>
まとめ
いかがでしたでしょうか？
恐らく初級者の方でも順を追って学んで来られた方は、私のような過ちは犯さないと思います（笑）
ですが忙しい中で時間を見つけてはプログラミングに取り組んでいる、という方は私と同じような状況に陥ることもあると思います。
今回そのような方に何かしらお力添えできたらいいなぁ、と思いながらこのページを書き終えることにします。
最後まで閲覧下さりありがとうございました＾＾
プログラミング関係
