JavaScript タイマー処理 setIntervalとsetTimeout

JavaScriptのタイマー処理には以下の2種類があります。

• setTimeout関数：指定された時間の後に処理を実行する
• setInterval関数：指定した時間ごとに処理を実行する

setTimeoutの使い方

setTimeout()の基本的な使用方法です。

• 第一引数に、タイマー満了後に実行される関数
• 第二引数に、タイマーの時間をミリ秒 (1/1000 秒) 単位で指定

タイマーをキャンセル、停止したい場合には、setTimeout()で取得したIDを、clearTimeout()に指定します。
以下、setTimeout()とclearTimeout()のサンプルです。"3秒後にメッセージを表示"ボタンを押下することで、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秒以内に"メッセージをキャンセル"ボタンを押下することで、コンソールにキャンセルメッセージを表示します。
3秒毎にメッセージを表示
メッセージをキャンセル

var tID;

var intervalFunction = function(){
  console.log("3秒経過しました");
}

function intervalMessage() {
  tID= setInterval(intervalFunction , 3000);
  console.log(tID)
}

function stopIntervalMessage() {
  clearInterval(tID);
  console.log("キャンセルしました")
}

今日はここまで。