【JavaScript入門】指定した時間が経過したら処理を実行するsetTimeoutメソッドの使い方
3秒後にメソッドを呼び出したい。10秒後にメソッドを呼び出したい。など、指定した時間を経過したらメソッドを呼び出したい時に使えるのがsetTimeoutです。
setTimeoutの使い方setTimeout(実行したい処理,何秒後に実行するかをミリ秒で指定)setTimeout(func,3000)
See the Pen
setTimeout by shiakisudev (@shiakisu)
on CodePen.
以下はサンプルコードです。
HTML
<button id="start">スタート</button>
<div id="result"></div>
js
document.addEventListener('DOMContentLoaded',function(){
//タイマーID
let timerID;
//クリック時に呼び出される関数。
function start(){
function print(){
document.getElementById('result').innerHTML += '3秒経過しました。<br>';
}
//3秒後にprint()を実行。
timerID = setTimeout(print,3000);
}
//イベントリスナー登録（スタート）
document.getElementById('start').addEventListener('click',start,false);
},false);
document.getElementById('start').addEventListener('click',start,false);の処理が最初に実行されます。timerID = setTimeout(print,3000);の処理が実行されます。print()が実行され、画面に「3秒経過しました。」と表示されます。setTimeoutで指定した処理をキャンセルする方法window.clearTimeout(timerID);setTimeout実行時に発行されるIDを指定することにより、処理をキャンセルすることができます。
See the Pen
setTimeout2 by shiakisudev (@shiakisu)
on CodePen.
以下はサンプルコードです。
HTML
<button id="start">スタート</button>
<button id="cansel">キャンセル</button>
<div id="result"></div>
js
document.addEventListener('DOMContentLoaded',function(){
//タイマーID
let timerID;
//「スタート」ボタン押下時に呼び出される関数。
function start(){
function print(){
document.getElementById('result').innerHTML += '3秒経過しました。<br>';
}
//3秒後にprint()を実行。
timerID = setTimeout(print,3000);
}
//「キャンセル」ボタン押下時に呼び出される関数。
function cansel(){
//タイマーを終了する。
window.clearTimeout(timerID);
//キャンセルした旨を画面に表示する。
document.getElementById('result').innerHTML += "キャンセルされました。<br>";
}
//イベントリスナー登録（スタート）
document.getElementById('start').addEventListener('click',start,false);
//イベントリスナー登録（キャンセル）
document.getElementById('cansel').addEventListener('click',cansel,false);
},false);
setTimeoutの実行順序についてsetTimeoutを使う上で1つ気をつけておきたいのがsetTimeoutで指定した処理は3秒間待ってくれますが、後続の処理は待ってくれないということです。
以下のサンプルでは、「スタート」ボタンを押下すると①「ここはsetTimeoutよりも前の行です。」②「ここはsetTimeoutよりも後ろの行です。」③「3秒経過しました。」の順で画面に表示されることが確認できます。
See the Pen
setTimeout3 by shiakisudev (@shiakisu)
on CodePen.
以下はサンプルコードです。
HTML
<button id="start">スタート</button>
<button id="cansel">キャンセル</button>
<div id="result"></div>
js
document.addEventListener('DOMContentLoaded',function(){
//タイマーID
let timerID;
//「スタート」ボタン押下時に呼び出される関数。
function start(){
document.getElementById('result').innerHTML += 'ここはsetTimeoutよりも前の行です。<br>';
function print(){
document.getElementById('result').innerHTML += '3秒経過しました。<br>';
}
//3秒後にprint()を実行。
timerID = setTimeout(print,3000);
document.getElementById('result').innerHTML += 'ここはsetTimeoutよりも後ろの行です。<br>';
}
//「キャンセル」ボタン押下時に呼び出される関数。
function cansel(){
//タイマーを終了する。
window.clearTimeout(timerID);
//キャンセルした旨を画面に表示する。
document.getElementById('result').textContent += "キャンセルされました。";
}
//イベントリスナー登録（スタート）
document.getElementById('start').addEventListener('click',start,false);
//イベントリスナー登録（キャンセル）
document.getElementById('cansel').addEventListener('click',cansel,false);
},false);
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！