JavaScriptのsetTimeoutとsetIntervalの違いと使い方・一定時間後、一定間隔で処理を実行する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのsetTimeoutとsetIntervalの違いと使い方・一定時間後、一定間隔で処理を実行する方法について解説していきます。

1 setTimeout と setInterval の違いと使い方とは？
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 プログラミング学習・エンジニア転職関連の情報
5 Twitterやってます！Follow Me！
6 最近の投稿

setTimeout と setInterval の違いと使い方とは？

JavaScriptのsetTimeoutとsetIntervalの違いと使い方のポイントは、その英単語が示すとおりです。

Timeoutは「指定した時間の経過」を意味しており、指定した時間の経過を待って関数を実行するのがsetTimeout() です。

また、Intervalは「間隔」を意味しており、指定した間隔(時間経過)ごとに処理を実行するのがsetInterval() になります。

つまり、「一定時間後に処理を実行する」(Timeout) か「一定時間ごとに処理を実行する」(Interval) かの違いがあります。

それでは、実際にCodeで動作を確認していきます。

一定時間後に処理を実行したい: setTimeout(関数, ミリ秒)

一定時間後に処理を実行したい場合は、setTimeout(関数, ミリ秒) の形で、時間の指定と関数の設定を実施します。

console.log(`JavaScript起動時刻: ${new Date().toLocaleTimeString()}`);

// 1. 一定時間後に処理を実行したい: setTimeout(関数, ミリ秒)
const timerId = setTimeout( () => {
    console.log(`1秒後に、setTimeout起動: ${new Date().toLocaleTimeString()}`);
}, 1000);


const timerId2 = setTimeout( () => {
    console.log(`2秒後に、setTimeout起動: ${new Date().toLocaleTimeString()}`);
}, 2000);


const timerId3 = setTimeout( () => {
    console.log(`3秒後に、setTimeout起動: ${new Date().toLocaleTimeString()}`);
}, 3000);

一定時間後の処理を解除したい: clearTimeout(タイマーID)

setTimeout の処理をキャンセルしたい場合は、clearTimeout(タイマーID) とすると予定していたタイマー処理をキャンセルできます。

上記のタイマーIDとはsetTimeout() の返り値です。このタイマーIDをclearTimeout()に渡せば、一定時間後に予定していた処理を解除できます。

console.log(`JavaScript起動時刻: ${new Date().toLocaleTimeString()}`);

const timerId = setTimeout( () => {
    console.log(`1秒後に、setTimeout起動: ${new Date().toLocaleTimeString()}`);
}, 1000);


const timerId2 = setTimeout( () => {
    console.log(`2秒後に、setTimeout起動: ${new Date().toLocaleTimeString()}`);
}, 2000);


const timerId3 = setTimeout( () => {
    console.log(`3秒後に、setTimeout起動: ${new Date().toLocaleTimeString()}`);
}, 3000);

console.log('timerId', timerId);
console.log('timerId2', timerId2);
console.log('timerId3', timerId3);


// 2. 一定時間後の処理を解除したい: clearTimeout(タイマーID)
clearTimeout(timerId2);

一定時間ごとに処理を実行したい: setInterval(関数, ミリ秒)

一定間隔で処理を実行したい場合は、setInterval(関数, ミリ秒) の形で、時間の指定と関数の設定を実施します。

アニメーションの関数を呼び出すなど、一定間隔で周期的に何か動作・処理を実行させたいときに役立ちます。

console.log(`JavaScript起動時刻: ${new Date().toLocaleTimeString()}`);

// 3. 一定時間ごとに処理を実行したい: setInterval(関数, ミリ秒)
const intervalId = setInterval(() => {
    console.log(`1秒間隔で、setInterval起動: ${new Date().toLocaleTimeString()}`);
}, 1000);

const intervalId2 = setInterval(() => {
    console.log(`2秒間隔で、setInterval起動: ${new Date().toLocaleTimeString()}`);
}, 2000);

一定時間ごとの処理を解除したい: clearInterval(インターバルID)

setInterval の処理をキャンセルしたい場合は、clearInterval(インターバルID) とすると予定していたタイマー処理をキャンセルできます。

上記のインターバルIDとはsetInterval() の返り値です。このインターバルIDをclearInterval()に渡せば、一定時間ごとに予定していた処理を解除できます。

console.log(`JavaScript起動時刻: ${new Date().toLocaleTimeString()}`);

const intervalId = setInterval(() => {
    console.log(`1秒間隔で、setInterval起動: ${new Date().toLocaleTimeString()}`);
}, 1000);

const intervalId2 = setInterval(() => {
    console.log(`2秒間隔で、setInterval起動: ${new Date().toLocaleTimeString()}`);
}, 2000);

// 4. 一定時間ごとの処理を解除したい: clearInterval(インターバルID)
clearInterval(intervalId2);