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

JavaScriptのclearTimeout()関数とは？タイマーを解除する役割と使い方を解説

JavaScriptでは、setTimeout()関数を使ってタイマーを設定できますが、そのタイマーはclearTimeout()関数によって解除（キャンセル）することができます。

clearTimeout()関数の基本的な役割

setTimeout()関数を実行すると、指定した時間の経過後に処理を実行するための「タイマーID」が戻り値として返されます。このタイマーIDをclearTimeout()関数に渡すことで、まだ実行されていないタイマー処理を取り消すことが可能です。繰り返し処理を伴うアニメーションなどで、処理を任意のタイミングで停止させたい場合に非常に便利です。

サンプルコード

以下のコードを実行すると、JavaScriptにおけるclearTimeout()関数の実装方法を確認できます。この例では、画像を右方向へアニメーション移動させ、「Stop」ボタンをクリックするとアニメーションが停止します。

<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
            var imgObj = null;
            var animate ;
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative';
               imgObj.style.left = '0px';
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20); // 20ミリ秒後にmoveRightを呼び出す
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px';
            }
            window.onload =init;
         //-->
      </script>
   </head>
   <body>
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>下のボタンをクリックしてアニメーションを操作してください</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type="button" value="Stop" onclick="stop();" />
      </form>
   </body>
</html>

コードの解説

  • init()関数：ページ読み込み時に実行され、画像要素を取得して初期位置（0px）を設定します。
  • moveRight()関数：画像を10pxずつ右へ移動させ、setTimeout()を使って20ミリ秒後に自身を再帰的に呼び出すことで、連続的なアニメーションを実現しています。
  • stop()関数：clearTimeout(animate)によってsetTimeout()で生成されたタイマーを解除し、アニメーションを停止させたうえで、画像を初期位置に戻します。

このように、setTimeout()とclearTimeout()を組み合わせることで、動きのあるコンテンツを自由に開始・停止させることができます。

  1. JavaScriptのparseInt()メソッドとは？文字列を整数に変換する使い方を解説

    JavaScriptのparseInt()メソッドは、文字列を解析（パース）して整数を返すための関数です。数値に変換できる部分だけを読み取り、整数値として結果を返します。 さらに、第2引数として基数（記数法）を指定することもできます。たとえば「16」を指定すると、文字列を16進数として解釈します。 parseInt()メソッドの主な特徴 文字列の先頭から解析し、最初に現れた数値以外の文字の手前までを整数として返します。 小数点以下は切り捨てられます（例：20.50 → 20）。 先頭が数値として解釈できない場合、NaN（Not a Number）を返します。 第2引数の基数を指定することで、

  2. JavaScriptのapply()関数の使い方とcall()関数との違いを解説

    従来のJavaScriptでは、オブジェクトごとに固有のメソッドやプロパティを持たせるのが一般的でした。しかし、apply()関数を使えば、複数のオブジェクトを組み合わせてアクセスできるメソッドを構築することが可能になります。実際のところ、このメソッドの動作はcall()関数とほぼ同じですが、配列のような変数を引数として渡したい場合には、apply()関数が活躍します。次の例では、複数の引数が個別に渡されているため、apply()関数を使う必要はなく、代わりにcall()関数が使用されています。サンプルコード<html> <body> <script>