JavaScript タイマーの使い方（setTimeout, setInterval, clearTimeout, clearInterval）

2021/09/01

何秒後かに何かの処理を行いたい、もしくは一定時間毎に何かの処理をしたい場合に JavaScript では以下の関数を使います。

関数	書式	説明
setTimeout	id = setTimeout(func, timeval) id :タイムアウト処理の識別ID func :タイムアウト時に実行する関数 timeval:タイムアウト時間（ミリ秒）	タイムアウト時の関数設定を行う
setInterval	id = setInterval(func, timeval) id :タイマー処理の識別ID func :タイマー時間毎に実行する関数 timeval:タイマー時間（ミリ秒）	タイマー処理の関数設定を行う
clearTimeout	clearTimeout(id) id :タイムアウト処理の識別ID	タイムアウト処理を中止するここで指定される id は setTimeout で返されたものを指定
clearInterval	clearInterval(id) id :タイマー処理の識別ID	タイマー処理を中止するここで指定される id は setInterval で返されたものを指定

今回は、これらの関数を使って指定時間が過ぎた時に何かの処理を行うものと、ある一定時間ごとに処理を繰り返すものの例を記したいと思います。

JavaScript コードレシピ集

JavaScriptによるWeb開発のための、究極のレシピ集。制作の現場で使われる定番テクニックからプロ技まで集めたそうです。

■指定時間が過ぎた時に何かの処理を行う簡単な例（タイムアウト処理）

以下の例では「タイマー開始」 button タグのクリックイベントでタイムアウト処理を行う関数 StartTimeout を呼出しています。
StartTimeout ではタイムアウト関数である TimeoutProc を宣言してそれを setTimeout に渡すことでタイムアウト処理が開始されます。
setTimeout のタイムアウト時間はミリ秒での指定なので、10秒の場合は1000倍した10000を指定します。

「タイマー開始」をクリックするとボタンが押下不可になり、5秒後に「タイムアウト!」のメッセージが表示され、「タイマー開始」が押下可能となります。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 1</h2>
    <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
</body>
<script type="text/javascript">
function StartTimeout() {
    //ボタン押下不可設定
    $("#StartButton").attr("disabled", true);
    //タイムアウト関数宣言
    var TimeoutProc = function() {
        alert("タイムアウト!");
        //ボタン押下許可設定
        $("#StartButton").attr("disabled", false);
    };
    var timeoutVal = 5 * 1000; //5秒
    //タイムアウトの設定
    setTimeout(TimeoutProc, timeoutVal);
}
</script>
</html>

■指定時間が過ぎる前にタイムアウト関数の実行を止める簡単な例

上記の例に「タイマー停止」ボタンを設置し「タイマー開始」で設定されたタイムアウト処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setTimeout でタイムアウト関数を設定しますが、戻り値として返されるタイムアウトidを変数に退避します。

「タイマー停止」で呼ばれる StopTimeout ではタイムアウトidを clearTimeout に渡してタイムアウト処理を中止します。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 2</h2>
    <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
    <button type="button" id="StopButton"  onclick="StopTimeout();" disabled="disabled">タイマー停止</button>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
    //開始ボタン不可、停止ボタン許可設定
    $("#StartButton").attr("disabled", true);
    $("#StopButton").attr("disabled", false);
    //タイムアウト関数宣言
    var TimeoutProc = function() {
        alert("タイムアウト!");
        //開始ボタン許可、停止ボタン不可設定
        $("#StartButton").attr("disabled", false);
        $("#StopButton").attr("disabled", true);
    };
    var timeoutVal = 5 * 1000; //5秒
    //タイムアウトの設定
    id = setTimeout(TimeoutProc, timeoutVal);
}
//タイマー停止
function StopTimeout() {
    //タイムアウトの停止
    clearTimeout(id);
    //開始ボタン許可、停止ボタン不可設定
    $("#StartButton").attr("disabled", false);
    $("#StopButton").attr("disabled", true);
}
</script>
</html>

■一定時間ごとに処理を繰り返す簡単な例

一定時間ごとに繰り返す処理と言えば、時計の様に時刻を表示する処理があります。
これを実現するため「タイマー開始」ボタンを設置し、それをクリックすることで1秒毎に現在時刻を表示する例を示します。

以下の例では「タイマー開始」ボタンのクリックイベントでタイマー処理を行う関数 setInterval を呼出しています。 StartTimeout ではタイマー関数である TimeProc を宣言してそれを setInterval に渡すことでタイムアウト処理が開始されます。

このソースでは一旦「タイマー開始」ボタンのクリックすると止める手立てがありませんので、ずっと時刻表示が続きます。（なおブラウザの再読込で最初の状態になりますが...）

<html>
<head>
<meta charset="utf-8">
<title>Timer - 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 3</h2>
    <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
    <br /><br />
    時刻：<span id="ptime"></span>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
    //ボタン押下不可設定
    $("#StartButton").attr("disabled", true);
    //タイマー関数宣言
    var TimeProc = function() {
        //Dateオブジェクトを作成する
        var dateobj = new Date();
        //時刻表示
        $("#ptime").text(dateobj.toTimeString());
    };
    var timeoutVal = 1 * 1000; //1秒
    //タイマーの設定
    id = setInterval(TimeProc, timeoutVal);
}
</script>
</html>

■一定時間ごとの処理を途中で止める簡単な例

上記の例ではタイマー処理を中断できなかったので「タイマー停止」ボタンを設置し、「タイマー開始」で設定されたタイマー処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setInterval でタイムアウト関数を設定しますが、戻り値として返されるタイマーidを変数に退避します。

「タイマー停止」で呼ばれる StopTimeout ではタイマーidを clearInterval に渡してタイマー処理を中止します。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 4</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 4</h2>
    <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
    <button type="button" id="StopButton"  onclick="StopTimeout();" disabled="disabled">タイマー停止</button>
    <br /><br />
    時刻：<span id="ptime"></span>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
    //開始ボタン不可、停止ボタン許可設定
    $("#StartButton").attr("disabled", true);
    $("#StopButton").attr("disabled", false);
    //タイマー関数宣言
    var TimeProc = function() {
        //Dateオブジェクトを作成する
        var dateobj = new Date();
        //時刻表示
        $("#ptime").text(dateobj.toTimeString());
    };
    var timeVal = 1 * 1000; //1秒
    //タイマーの設定
    id = setInterval(TimeProc, timeVal);
}
//タイマー停止
function StopTimeout() {
    //タイマーの停止
    clearInterval(id);
    //開始ボタン許可、停止ボタン不可設定
    $("#StartButton").attr("disabled", false);
    $("#StopButton").attr("disabled", true);
}
</script>
</html>

ここまでは setInterval や setTimeout の引数としての関数を別の変数で宣言した後で、それぞれの関数に渡していました。その引数のところに無名関数として直接に宣言する方法もありますので、上のソースを変更してみます。

<html>
<head>
<meta charset="utf-8">
<title>Timer - 4 - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Timer - 4 - 1</h2>
    <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button>
    <button type="button" id="StopButton"  onclick="StopTimeout();" disabled="disabled">タイマー停止</button>
    <br /><br />
    時刻：<span id="ptime"></span>
</body>
<script type="text/javascript">
var id;
//タイマー開始
function StartTimeout() {
    //開始ボタン不可、停止ボタン許可設定
    $("#StartButton").attr("disabled", true);
    $("#StopButton").attr("disabled", false);
 
    var timeVal = 1 * 1000; //1秒
    //タイマーの設定(関数宣言を共に)
    id = setInterval(function() {
        //Dateオブジェクトを作成する
        var dateobj = new Date();
        //時刻表示
        $("#ptime").text(dateobj.toTimeString());
    }, timeVal);
}
//タイマー停止
function StopTimeout() {
    //タイマーの停止
    clearInterval(id);
    //開始ボタン許可、停止ボタン不可設定
    $("#StartButton").attr("disabled", false);
    $("#StopButton").attr("disabled", true);
}
</script>
</html>

VB.NET-TIPS などプログラミングについて