ホーム プログラミング言語 Web関連 javascript JS timer(タイマー): setTimeout および setInterval

JS timer(タイマー): setTimeout および setInterval


 
 
timer「タイマー」と呼ばれることもある JavaScript タイマーは、生活の目覚まし時計のように、指定された時間が経過した後に特定のタスクを実行するために使用されます。

 

JavaScript では、タイマーを使用してコードの実行を遅らせたり、一定の間隔でコードを繰り返し実行したりできます。たとえば、タイマーを使用して、ページ上の広告を定期的に更新したり、リアルタイム クロックを表示したりできます。

JavaScript でタイマーを設定するには、setTimeout() と setInterval() の 2 つの方法があります。

方法 例証する
setTimeout() 指定された時間 (ミリ秒単位) の後、コードを実行します。コードは 1 回だけ実行されます。
setInterval() 指定されたサイクル (ミリ秒単位) に従ってコードを繰り返し実行します。タイマーは、 clearInterval() 関数を呼び出してブラウザー ウィンドウを手動で停止または閉じるまで自動的に停止しません。

setTimeout()

JS の setTimeout() 関数は、指定された時間の経過後にコードを実行するために使用され、コードは 1 回だけ実行されます。

JS setTimeout() 関数の構文形式は次のとおりです。

setTimeout(function[, delay, arg1, arg2, …]);
setTimeout(function[, delay]);
setTimeout(code[, delay]);

パラメータの説明は次のとおりです。

  • function: タイマーで実行されるコードを定義する関数 (通常は無名関数を使用)。
  • code: 文字列型のコード。これらのコードは、タイマーの期限が切れた後にコンパイルおよび実行されます。セキュリティ上の理由からお勧めしません。
  • delay: オプションのパラメーター。タイマーがコードを実行する前に待機する時間 (ミリ秒単位) (1 秒 = 1000 ミリ秒)。このパラメーターを省略した場合は、即時実行を意味します。
  • arg1, arg2, …, argN: 関数に渡される引数。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var myFun = function (str = 'JavaScript'){
            document.write(str + "<br>");
        };

        setTimeout(myFun, 500, 'ハロー');
        setTimeout(myFun, 1000);
        setTimeout(function(){
            document.write("タイマー<br>");
        }, 1500)
        setTimeout("document.write(\"setTimeout()\")", 2000);
    </script>
</body>
</html> 

上記のコードを実行すると、次のコンテンツが 500 ミリ秒間隔で順番に出力されます。

 

ハロー

JavaScript
タイマー
setTimeout()

setInterval()

JS の setInterval() 関数は、繰り返し実行できるタイマーを定義できます。各実行は、指定された時間間隔だけ待機する必要があります。

JS setInterval() 関数の構文形式は次のとおりです。

setInterval(function, delay, [arg1, arg2, …]);
setInterval(code, delay);

パラメータの説明は次のとおりです。

  • function: タイマーで実行されるコードを定義する関数 (通常は無名関数を使用)。
  • code: 文字列型のコード。これらのコードは、タイマーの期限が切れた後にコンパイルおよび実行されます。セキュリティ上の理由からお勧めしません。
  • delay: オプションのパラメーター。タイマーがコードを実行する前に待機する時間 (ミリ秒単位) (1 秒 = 1000 ミリ秒)。このパラメーターを省略した場合は、即時実行を意味します。
  • arg1, arg2, …, argN: 関数に渡される引数。

ヒント: setInterval() 関数で定義されたタイマーは、手動でブラウザ ウィンドウを停止または閉じるために clearInterval() 関数が呼び出されない限り、自動的に停止されません。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p id="one"></p>
    <p id="two"></p>
    <script type="text/javascript">
        var num = 1;
        var myFun = function (){
            document.getElementById('one').innerHTML += num + "&nbsp;";
            num ++;
        };

        setInterval(myFun, 500);
        setInterval(function(){
            var d = new Date();
            document.getElementById('two').innerHTML = d.toLocaleTimeString();
        }, 1000);
    </script>
</body>
</html> 

操作の結果は次のとおりです。

1 2 3 4 5 6 7 8 9
16:01:13

JSキャンセルタイマー

setTimeout() または setInterval() を使用してタイマーを設定する場合、これら 2 つのメソッドは、「タイマー識別子」とも呼ばれる正の整数値であるタイマーの一意の ID を生成します。 ID へのクリアが可能です。

clearTimeout() または clearInterval() 関数を使用して、それぞれ setTimeout() または setInterval() 関数によって作成されたタイマーをクリアできます。 clearTimeout() または clearInterval() 関数を呼び出すには、パラメーターとしてタイマーの一意の ID を指定する必要があります。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p>現在時刻:<span id="clock"></span></p>
    <button onclick="stopClock(this);">停止</button><hr>
    <button onclick="delayedAlert(this);">2秒後にアラートを表示</button>
    <button onclick="clearAlert();">キャンセル</button>
    <script type="text/javascript">
        var intervalID;
        function showTime() {
            var d = new Date();
            document.getElementById("clock").innerHTML = d.toLocaleTimeString();
        }

        function stopClock(e) {
            clearInterval(intervalID);
            e.setAttribute('disabled', true)
        }
        intervalID = setInterval(showTime, 1000);

        var timeoutID;
        var that;
        function delayedAlert(e) {
            that = e;
            timeoutID = setTimeout(showAlert, 2000);
            e.setAttribute('disabled', true)
        }
        function showAlert() {
            alert('これはアラートです。');
            that.removeAttribute('disabled');
        }
        function clearAlert() {
            clearTimeout(timeoutID);
            that.removeAttribute('disabled');
        }
    </script>
</body>
</html> 

実行結果は次の図のとおりです。

図 1: タイマーのキャンセル
図 1: タイマーのキャンセル
 

「JS タイマー: setTimeout および setInterval」についてわかりやすく解説!絶対に観るべきベスト2動画

setTimeout関数の利用方法 JavaScriptでタイマーを設定する方法
Node.js Timer API. setTimeout, setInterval, setImmediate and how to cancel a timer