JavaScriptのタイマー処理には以下の2種類があります。
- setTimeout関数:指定された時間の後に処理を実行する
- setInterval関数:指定した時間ごとに処理を実行する
setTimeoutの使い方
setTimeout()の基本的な使用方法です。
- 第一引数に、タイマー満了後に実行される関数
- 第二引数に、タイマーの時間をミリ秒 (1/1000 秒) 単位で指定
タイマーをキャンセル、停止したい場合には、setTimeout()で取得したIDを、clearTimeout()に指定します。
以下、setTimeout()とclearTimeout()のサンプルです。"3秒後にメッセージを表示"ボタンを押下することで、3秒後にデバッガーのコンソールにメッセージを表示し、3秒以内に"メッセージをキャンセル"ボタンを押下することで、コンソールにキャンセルメッセージを表示します。
var tID; var timeOutFunction = function(){ alert("3秒経過しました"); } function delayMessage() { tID = setTimeout(timeOutFunction , 3000); console.log(tID) } function clearMessage() { clearTimeout(tID); console.log("キャンセルしました") }
setIntervalの使い方
setInterval()の基本的な使用方法です。
- 第一引数に、指定された時間毎に実行される関数
- 第二引数に、タイマーの時間をミリ秒 (1/1000 秒) 単位で指定
タイマーをキャンセル、停止したい場合には、setInterval()で取得したIDを、clearInterval()に指定します。
以下、setInterval()とclearInterval()のサンプルです。"3秒後にメッセージを表示"ボタンを押下することで、3秒後にコンソールにメッセージを表示し、3秒以内に"メッセージをキャンセル"ボタンを押下することで、コンソールにキャンセルメッセージを表示します。
var tID; var intervalFunction = function(){ console.log("3秒経過しました"); } function intervalMessage() { tID= setInterval(intervalFunction , 3000); console.log(tID) } function stopIntervalMessage() { clearInterval(tID); console.log("キャンセルしました") }
今日はここまで。