・clearTimeoutの詳しい使い方を知りたい。
・clearIntervalとの違いは？
JavaScriptでは、setTimeoutによるタイマー処理を終了させるために、clearTimeoutを使いますが、詳しい使い方を知らない人も多いでしょう。
そこでこの記事では、clearTimeoutの使い方について詳しく解説します！
この記事を読めば、clearTimeoutの使い方を理解し、setTimeoutによるタイマー処理を終了させることができるでしょう。また、clearIntervalとの違いも合わせて理解できます。
JavaScriptのclearTimeoutの使い方がわからない、setTimeoutによるタイマー処理を終了させたい人は、ぜひ最後までご覧ください。
clearTimeoutとは？
clearTimeoutとは、setTimeoutによるタイマー処理を終了させるメソッドです。
JavaScriptでは、setTimeoutによって一定時間後に処理を実行させるタイマー処理があります。
そのsetTimeoutは、タイマー処理を実行させることはできますが、途中で終了させることはできません。
タイマー処理を終了させるためには、clearTimeoutを使うことで実装できます。
では、そのclearTimeoutの具体的な使い方について見ていきましょう。
clearTimeoutの書き方
clearTimeoutのコードの書き方は次の通りです。
|
1 |
clearTimeout(timeoutID) |
clearTimeoutは、タイマー処理のIDを指定することで、処理を終了させることができます。
このタイマー処理のIDは、setTimeoutで実行するタイマー処理のことです。
|
1 2 3 |
let timerID = setTimeout(関数, 1000); clearTimeout(timerID); |
例えば、setTimeoutを変数「timerID」に代入した場合、それがタイマー処理のIDとなります。
そして、clearTimeoutに変数「timerID」を指定することで処理を終了させることができます。
clearTimeoutの使い方
それでは、実際にsetTimeoutを使ってタイマー処理を作り、clearTimeoutで処理を終了させてみましょう。
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> let result = function() { console.log('3秒経ちました'); } let time = setTimeout(result, 3000); clearTimeout(time); </script> |
今回は、3秒経過したらデベロッパーツールのConsoleに「3秒経ちました」と出力されるタイマー処理を作ってみます。
まず、関数を作成し、変数「result」に代入します。
関数の処理は「console.log(‘3秒経ちました’)」と指定しておきます。
そして、setTimeoutの第1引数に関数の「result」と、第2引数に「3000」（=3秒）を指定し、変数「time」に代入しましょう。
あとは、タイマー処理を終了させるために、「clearTimeout(time)」と指定します。
結果をデベロッパーツールのConsoleで確認してみましょう。
結果を表示しても、「3秒経ちました」というメッセージは出力されません。
これは、clearTimeoutによって、タイマー処理を終了させたためです。
しかしこれだけでは、タイマー処理が終了されたのかどうかわかりにくいため、別の例でも見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> let i = 0; let result = function() { i++; console.log(i); let time = setTimeout(result, 1000); if (i >= 5) { clearTimeout(time); } } result(); </script> |
上記のコードは、setTimeoutで1秒ごとにカウントする繰り返し処理です。
まず、「let i = 0」でカウントの初期値を指定します。
そして、関数を作成し、変数「result」に代入します。
この関数の中に、毎秒1ずつカウントするために「i++」と指定し、それをconsole.logで出力しましょう。
setTimeoutの処理では、第1引数に関数「result」、第2引数に「1000」（=1秒）を指定し、変数「time」に代入します。
このままでは半永久的にタイマー処理が続いてしまうため、if文を使って「もし値が5になれば」という条件で「if (i >= 5)」と指定します。
そして、「clearTimeout(time)」でタイマー処理を終了させます。
あとは、関数の「result」を呼び出せば、タイマー処理の実装が完了です。
結果を表示すると、次のようになるでしょう。
1秒ごとに数字がカウントされていき、5に達した時点でカウントが終了しました。
この結果から、条件分岐によって指定したclearTimeoutによってタイマー処理を終了したことがわかりますね。
このように、clearTimeoutを使うことで、setTimeoutによるタイマー処理を終了させることができます。
setTimeoutとセットで覚えておくといいでしょう。
【JavaScript】setTimeoutでタイマー処理を実装する方法
clearTimeoutとclearIntervalの違い
ここまで、clearTimeoutの使い方について解説しました。
ですが、clearTimeoutと似たメソッドでclearIntervalというものがあります。
clearIntervalもタイマー処理を終了させるメソッドですが、これら2つのメソッドは一体何が違うのでしょうか。
実は、clearTimeoutもclearIntervalも役割は全く同じです。
clearTimeoutはsetTimeoutによるタイマー処理を終了させるメソッドで、clearIntervalはsetIntervalによるタイマー処理を終了させるメソッドです。
では、clearIntervalはclearTimeoutと同じ働きを持っているのか、実際にコードに書いて確認してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript"> let i = 0; let result = function() { i++; console.log(i); if (i >= 5) { clearInterval(time); } } let time = setInterval(result, 1000); </script> |
clearIntervalは、clearTimeoutと同じように、「clearInterval(IntervalID)」というようにインターバルのIDを指定することで、タイマー処理を終了させることができます。
上記のように、1秒ずつ数字をカウントしていくタイマー処理があったとします。
「let i = 0」で初期値を設定し、関数「result」の中で1ずつカウントさせたものをconsole.logで出力します。
そして、カウントが5になった場合にタイマー処理を終了させるため、if文を使って「i >= 5」という条件分岐を作ります。
そのif文で「clearInterval(time)」と指定し、タイマー処理を終了させましょう。
あとは、関数の外で「setInterval(result, 1000)」と指定し、変数の「time」に代入すれば、タイマー処理ができます。
結果を表示すると、次にようになります。
デベロッパーツールのConsoleで確認すると、1秒ごとにカウントされ、5の時点で処理が終了しました。
この結果から、clearIntervalによってタイマー処理が終了されたことがわかりますね。
このように、clearIntervalはsetIntervalによるタイマー処理を終了させることができます。
clearTimeoutと同じ役割を持っているので、使い間違えないように気をつけましょう。
JavaScriptのsetIntervalでタイマー処理をする方法【初心者向け】
まとめ
今回は、JavaScriptのsetTimeoutによるタイマー処理を終了させるclearTimeoutについて解説しました。
setTimeoutは、一定時間後に処理を実行させることができるメソッドですが、そのタイマー処理を終了させるためには、clearTimeoutを使う必要があります。
そのため、setTimeoutはclearTimeoutとセットで使い方を覚えておくことが望ましいでしょう。
この記事がJavaScriptの学習に役立つと幸いです。
