JavaScriptのタイマー処理 setIntervalとsetTimeout

#動作確認環境

• Mac
• Chrome

#JavaScriptのタイマー処理
処理を遅延させたい、3秒ごとに処理を繰り返したい、というとき、JavaScriptでは以下のような関数を使用します。

setTimeout関数 ・・・ 指定した時間経過後に処理を実行する
setInterval関数 ・・・ 指定した時間ごとに処理を実行する

また、それぞれタイマーを停止するための関数も用意されています。
clearTimeout関数 ・・・ setTimeoutで設定したタイマーを取り消す
clearInterval関数 ・・・ setIntervalで設定したタイマーを取り消す

###setTimeout関数　clearTimeout関数
指定した時間経過後に処理を実行します。

var log = function(){
  console.log("test");
};

setTimeout(log, 3000);
// 3秒後に"test"と表示されます

setTimeoutでは第1引数に指定した時間が経過した後に実行される処理、第2引数に経過時間をミリ秒で指定します。
処理に引数を渡したい場合は、第3引数以降に指定します。

const log = function(msg1){
  console.log(msg1);
};

setTimeout(log, 3000, "Hello");
// 3秒後に"test"と表示されます

const log = function(msg1, msg2){
  console.log(msg1, msg2);
};

setTimeout(log, 3000, "Hello,", "Chihiro");
// 3秒後に "Hello, Chihiro" と表示されます

一度setTimeoutを用いてタイマーを設定した後に解除したい場合は、clearTimeout関数を使用します。

const log = function(){
  console.log("test");
};

const timer = setTimeout(log, 3000);
clearTimeout(timer);
// タイマーが取り消される。3秒たっても "test" と表示されない。

clearTimeoutでは第1引数に取り消したいタイマー処理を設定したsetTimeoutの戻り値を指定します。

###setInterval関数　clearInterval関数
指定した時間ごとに処理を実行します。

const log = function(){
  console.log("test");
};

setInterval(log, 3000);
// 3秒ごとに"test"と表示されます

setIntervalでも第1引数に指定した時間が経過した後に実行される処理、第2引数に経過時間をミリ秒で指定します。
処理に引数を渡したい場合も、setTimeoutと同様、第3引数以降に指定します。

const log = function(msg1){
  console.log(msg1);
};

setInterval(log, 3000, "Hello");
// 3秒ごとに "Hello" と表示されます

setIntervalを用いてタイマーを設定する場合、指定された処理は指定した時間ごとに実行され続けます。解除したい場合は、clearInterval関数を使用します。

const log = function(){
  console.log("test");
};

const timer = setInterval(log, 3000);
clearInterval(timer);
// タイマーが取り消される。3秒たっても"test"と表示されない。

clearIntervalでも第1引数に取り消したいタイマー処理を設定したsetIntervalの戻り値を指定します。