時間差での処理 & 一定時間での処理

JavaScriptで時間差での処理と一定時間での処理する方法について簡単にまとめました。

時間差での処理
- setTimeout()：指定時間後に関数を実行
一定時間での処理
- setInterval()：指定時間の間隔で関数を実行
- clearInterval()：setIntervalを停止

時間差での処理

setTimeout()：指定時間後に関数を実行

setTimeoutを使用して指定した時間後に関数を実行する方法です。

文字列.setTimeout( 関数名, 秒数 )
「関数名」：実行したい関数名を指定
「秒数」　：何秒後に実行するかの時間を（ミリ秒で）指定

// アロー関数
const hoge = () => {
  console.log("2秒後に表示");
}
setTimeout(hoge, 2000);

// functionでの関数
function hoge() {
  console.log("2秒後に表示");
}
setTimeout(hoge, 2000);

無名関数での書き方はこちら

// アロー関数
setTimeout(() => {
  console.log("2秒後に表示");  
}, 2000);

// functionでの関数
setTimeout(function() {
  console.log("2秒後に表示");  
}, 2000);

関数に「()」を付けない

例えば「setTimeout(hoge(), 2000);」のようにすると、関数の「hoge」が実行されて「undefined」となってしまうため注意してください。

一定時間での処理

setInterval()：指定時間の間隔で関数を実行

setIntervalを使用して一定時間の間隔で関数を実行する方法です。

文字列.setInterval( 関数名, 秒数 )
「関数名」：実行したい関数名を指定
「秒数」　：繰り返したい時間を（ミリ秒で）指定

// アロー関数
const hoge = () => {
  console.log("2秒後に表示");
}
setInterval(hoge, 2000);

// functionでの関数
function hoge() {
  console.log("2秒後に表示");
}
setInterval(hoge, 2000);

無名関数での書き方はこちら

// アロー関数
setInterval(() => {
  console.log("2秒後に表示");  
}, 2000);

// functionでの関数
setInterval(function() {
  console.log("2秒後に表示");  
}, 2000);

上記例では、2秒後にconsoleを実行し続ける処理となっています。
実行を止める場合は、次のclearInterval()を行います。

clearInterval()：setIntervalを停止

setIntervalを止める方法です。

文字列.clearInterval( 戻り値 )
「戻り値」：停止するsetIntervalの戻り値を指定

const hoge = () => {
  console.log("2秒後に表示");
}
 
let si = setInterval(hoge, 2000);
 
const stop = () => {
  clearInterval(si);
  console.log("setIntervalを停止");
}
 
setTimeout(stop, 5000);

// ↓console結果
// "2秒後に表示"
// "2秒後に表示"
// "setIntervalを停止"

setIntervalの戻り値を保存する

clearInterval() で setInterval() の処理を停止したい場合は、setInterval() の戻り値を必ずどこかに保存しておく必要があります。