JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのclearTimeout()とclearInterval()メソッドの使い方を解説

JavaScriptにおけるタイマー処理では、clearTimeout()メソッドを使うことで、setTimeout()関数によって事前に設定されたタイムアウト（タイマー）を解除できます。同様に、clearInterval()メソッドは、setInterval()関数で設定されたインターバル（繰り返し処理）を停止するために使用します。

これらのメソッドは、ユーザーの操作に応じてタイマーや繰り返し処理をキャンセルしたい場合などに非常に便利です。以下に、両メソッドの動作を確認できるサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .timeout {
      margin-right: 170px;
      display: inline-block;
      width: 200px;
      height: 200px;
   }
   .interval {
      display: inline-block;
      width: 200px;
      height: 200px;
   }
   .stopTimeout {
      margin-right: 100px;
   }
</style>
</head>
<body>
<h1>clearTimeout() & clearInterval() Method</h1>
<div class="timeout" style="background-color: blue;"></div>
<div class="interval" style="background-color: blue;"></div>
<br />
<button class="startTimeout" onclick="startTimeout()">START TIMEOUT</button>
<button class="stopTimeout" onclick="stopTimeout()">STOP TIMEOUT</button>
<button class="startInterval" onclick="startInterval()">
START INTERVAL
</button>
<button class="stopInterval" onclick="stopInterval()">STOP INTERVAL</button>
<div class="resultInterval"></div>
<div class="resultTimeout"></div>
<script>
   let resInterval = document.querySelector(".resultInterval");
   let resTimeout = document.querySelector(".resultTimeout");
   function changeColor(ele) {
      if (ele.style.backgroundColor == "blue") {
         ele.style.backgroundColor = "red";
      } else {
         ele.style.backgroundColor = "blue";
      }
   }
   let timeout;
   function startTimeout() {
      timeout = setTimeout(
      changeColor.bind(this, document.querySelector(".timeout")),
      1500
   );
   resTimeout.innerHTML = "Timeout has been started";
}
function stopTimeout() {
   clearTimeout(timeout);
   resTimeout.innerHTML = "Timeout has been cleared";
}
let interval;
function startInterval() {
   interval = setInterval(
      changeColor.bind(this, document.querySelector(".interval")),
      1500
   );
   resInterval.innerHTML = "Interval has been started";
}
function stopInterval() {
   clearInterval(interval);
   resInterval.innerHTML = "Interval has been cleared";
}
</script>
</body>
</html>

実行結果

初期状態

JavaScriptのclearTimeout()とclearInterval()メソッドの使い方を解説

STARTボタン押下後

「START TIMEOUT」および「START INTERVAL」ボタンをクリックし、数秒待つと、それぞれの要素の背景色が青から赤へと変化します。

JavaScriptのclearTimeout()とclearInterval()メソッドの使い方を解説

STOPボタン押下後

「STOP TIMEOUT」および「STOP INTERVAL」ボタンをクリックすると、設定されていたタイマーとインターバルが解除され、色の変化が止まります。

JavaScriptのclearTimeout()とclearInterval()メソッドの使い方を解説

ポイントまとめ

  • setTimeout()で取得したIDをclearTimeout()に渡すと、まだ実行前のタイムアウト処理をキャンセルできる。
  • setInterval()で取得したIDをclearInterval()に渡すと、繰り返し実行されている処理を停止できる。
  • どちらも戻り値として返されるタイマーIDを変数に保持しておくことが重要。
  1. JavaScriptのsort()メソッドとは?配列ソートの基本と比較関数の使い方を解説

    JavaScriptのsort()メソッドは、配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並べ替えの基準に加え、昇順・降順も自由に指定できます。デフォルトでは要素が文字列として比較され昇順にソートされますが、比較関数を渡すことで任意の順序を実現できます。 なお、sort()は元の配列そのものを変更する「破壊的メソッド」である点にも注意しましょう。元の配列を保持したい場合は、スプレッド構文([...arr])などで事前にコピーしておくのが安全です。 コード例 以下は、sort()メソッドを使って配列をソートするシンプルなサンプルコードです。 <!DO

  2. JavaScriptのObject.fromEntries()メソッドとは？配列やMapをオブジェクトに変換する方法

    JavaScriptのObject.fromEntries()メソッドは、「キー」と「値」のペアを持つ配列やMapなどのイテラブル（反復可能なオブジェクト）を、ひとつのオブジェクトに変換するためのメソッドです。 ES2019で追加されたこのメソッドは、オブジェクトを [key, value] 形式の配列に変換する Object.entries() と対になる存在であり、両者を組み合わせることで、オブジェクトのフィルタリングやデータ形式の変換を簡潔に記述できます。 基本構文 Object.fromEntries(iterable) 引数には、[キー, 値] のペアを要素として持つ配列やMapな