指定時間経過後に1回実行する(window.setTimeout)
window オブジェクトの setTimeout メソッドを実行すると、引数で指定した時間を経過したあとに 1 回だけ指定した関数を呼び出すことができます。ここでは window.setTimeout メソッドを使って指定時間経過後に 1 回だけ関数を呼び出す方法について解説します。
(Last modified: )
指定時間経過後に1回実行する
window オブジェクトの setTimeout メソッドを実行すると、指定した時間経過したあとに 1 回だけ指定した関数を呼びだすことができます。書式は次のとおりです。
window.setTimeout(function[, delaytime])
1 番目の引数には呼び出す関数名を指定します。省略可能な 2 番目の引数には関数を呼びだすまでの経過時間をミリ秒単位で指定します。引数を省略した場合は 0 が使用され、できるだけ早く関数が呼び出されます。
戻り値には、今回のタイマーの識別 ID が返されます。この setTimeout で指定した経過秒数が経過する前に戻り値で取得した ID を指定して window.clearTimeout を実行すると setTimeout の実行をキャンセルすることができます。
setTimeout メソッドを実行するとタイマーが起動します。経過時間が経過すると関数が 1 回呼び出されます。例えば次のように実行します。
window.setTimeout(dispMsg, 5000);
function dispMsg(){
alert('時間切れです');
}
無名関数を使って次のように記述することもできます。
window.setTimeout(function(){
alert('時間切れです');
}, 5000);
次のサンプルを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<p>サンプルページです。</p>
<input type="button" value="click" id="btn">
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
window.setTimeout(function(){
alert('時間切れです');
}, 5000);
});
</script>
</body>
</html>
画面に表示されているボタンをクリックするとタイマーが起動し、 5000 ミリ秒( 5 秒)経過すると警告ダイアログが表示されます。
setTimeoutメソッドによる関数の呼び出しをキャンセルする
window オブジェクトの clearTimeout メソッドを実行すると、 setTimeout メソッドによって起動したタイマーをキャンセルすることができます。書式は次のとおりです。
window.clearTimeout(id)
1 番目の引数にはキャンセルするタイマーの id を指定します。この id は setTimeout メソッドを実行したときの戻り値として取得した id です。
例えば次のように実行します。
let id = window.setTimeout(function(){
alert('時間切れです');
}, 5000);
window.clearTimeout(id);
setTimeout メソッドの引数に指定した経過秒数が経過して関数が呼び出される前に clearTimeouot メソッドを実行すると setTimeout メソッドで起動したタイマーがキャンセルされます。
次のサンプルを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<p>サンプルページです。</p>
<input type="button" value="click" id="btnTimer">
<input type="button" value="cancel" id="btnCancel">
<script>
let timerid;
let btnTimer = document.getElementById('btnTimer');
btnTimer.addEventListener('click', function(){
timerid = window.setTimeout(function(){
alert('時間切れです');
}, 5000);
});
let btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function(){
window.clearTimeout(timerid);
console.log('キャンセルされました')
});
</script>
</body>
</html>
画面に表示されている click ボタンをクリックすると 5000 ミリ秒( 5 秒)経過すると警告ダイアログが表示されます。
タイマーで設定した 5000 ミリ秒が経過する前に cancel ボタンをクリックすると、指定した id のタイマーがキャンセルされます。
-- --
window.setTimeout メソッドを使って指定時間経過後に 1 回だけ関数を呼び出す方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。