【JavaScript】タイムアウトタイマーを使おう

ストップウォッチ画像

ブラウザでアプリを作っていると、「時間が計れたらな」とか、「何秒後にコールバックがほしい」時があると思います。その際に使い勝手のいい「タイムアウトタイマー」についてまとめたいと思います。

タイムアウトタイマーの基本

タイマーの基本は次の2つです。

  1. タイマーを起動する
  2. タイマーを削除する

1、タイマーを起動する

タイマーを起動するには

setTimeout ( 時間が来た場合の関数, 時間 (ms), 引数 );

と書きます。

setTimeout(function(){console.log(“時間です”);},3000);

3秒後にconsoleに「時間です」と表示します。

MDN setTimeout

https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

2、タイマーを削除する

タイマーを途中(実行前)に削除するには

clearTimeout(タイマーID);

と書きます。

var timerID = setTimeout(function(){console.log(“時間です”);},3000);

clearTimeout(timerID);

MDN clearTimeout

https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout

使用例

<!DOCTYPE html>
<html lang="ja">
    <meta charset="utf-8">
    <head>
        <title>タイマーを使う</title>        
        <style>
        </style>

    </head>
    <body>

        <button onclick="timerSet()">タイマーセット</button>
        <button onclick="timerClear()">タイマークリア</button>

        <script language="javascript">
            'use strict'
            var timerID = 0; 

            // タイマーセット関数
            function timerSet(){
                timerID = setTimeout(()=>{
                    timerID = 0;
                    console.log("時間です");
                    alert("時間です");
                    },3000);
                console.log(timerID);
            }

            //タイマークリア関数
            function timerClear(){
                if(timerID !== 0){
                    clearTimeout(timerID)
                    timerID = 0;
                }
            }

        </script>
    </body>
</html>

実行を見ることができます。動いているのが分かりづらいですが、タイマーセットは連打しないように気を付けてください。

あわせて読みたい