システム開発

2023.12.28

【JavaScript】setTimeoutの使い方やsetIntervalとの違いを解説

JavaScript プログラミング

JavaScriptを勉強中のエンジニアにはさまざまな関数の壁があり、setTimeoutもそのひとつです。しかし、処理を実行させても思うようにコード処理のタイミングを遅らせられず、困っている初心者エンジニアは多くいます。

そこで今回は、setTimeoutの基本的な使い方からsetIntervalの違いまで紹介します。また、setTimeoutがうまく動作しないときの確認ポイントや、使用での注意点についても解説していますので参考にしてください。

この記事でわかること

setTimeoutの基本
setIntervalとの細かな違い
タイマーセットやキャンセル方法など、setTimeoutの使い方
setTimeoutが動作しないときの確認ポイントと注意点

1 setTimeoutとは
2 setTimeoutの使い方
3 setTimeoutの注意点
4 まとめ
5 投稿者

setTimeoutとは

setTimeoutとは処理をすぐ実行するのではなく、一定時間経過後に1度処理するように指示する関数です。コード処理を実行するタイマーの役割をします。

通常、JavaScriptの処理はコードを上から順にすぐ処理します。しかし、setTimeoutを利用すると、数秒遅らせて処理することが可能です。

setTimeoutはさまざまな場面で利用されています。たとえば、Webサイトのトップページにある画面を数秒ごとに遷移させる、画像を数秒単位で切り替えるなど、サイトに動きをつけられるのがsetTimeoutです。

時間はミリ秒（ms）単位で指定

setTimeout処理で時間を入力する場合、単位はミリ秒（ms）で指定します。たとえば、1秒後に実行したいのであれば「1000」と入力します。10秒後であれば「10000」です。

setTimeoutは時間を指定するのではなく、何秒後に実行させるのかを設定するものです。Windowsのタスクスケジューラー機能のように、時間を指定するものではありません。

Windowsのタスクスケジューラー機能とは、特定の時間や曜日に定期的にソフトウェアを実行させるものです。

setTimeoutの使用イメージ

setTimeoutはインターネット上のさまざまな箇所で使用される関数です。身近にあるゲームのプログラミングでも、setTimeoutが多用されています。

戦闘ゲームはコントローラーでキャラクターを操作して、相手を攻撃したり防御したりするゲームです。操作後すぐに、キャラクターが指令をした動作をする単純な攻撃もあれば、ひとつの動作の数秒後に別のワザを出す攻撃もあります。このように、数秒後にほかの動作が出るように設定されているのは、setTimeoutがプログラミングされているためです。

ホームページでは、画面やキャラクターが切り替わったり動いたりしているのも、setTimeoutが使用されています。商品購入サイトの場合、サイトを開いてしばらくすると今のイチオシアイテムが表示されるサイトがありますが、これもsetTimeoutです。開いた5秒後、10秒後などに表示するようにあらかじめ設定されています。

このように、ゲーム使用者が楽しめる工夫や消費者の購買意欲を高めるためなど、さまざまな目的でsetTimeoutが使用されているのです。

setIntervalとの違い

JavaScriptではsetTimeoutとよく似た、setIntervalという関数もあります。setTimeoutが数秒後に1度実行するのに対し、setIntervalは指定した秒数ごとに実行を繰り返します。1度だけ時間を遅らせて動作させたいならsetTimeout、何度も同じ動作を一定間隔で繰り返させたいならsetIntervalです。

ホームページを閲覧していると、何度も広告が上がってくるサイトがあります。定期的に広告が何度も表示されるのは、setIntervalで処理しているためです。

setTimeoutの使い方

setTimeoutのセット方法とキャンセル方法を紹介します。

setTimeoutは1度だけタイマーを実行するため、定期的に繰り返すならsetIntervalを処理します。しかし、setTimeoutを複数回使用して、繰り返し処理することも可能です。セット方法とキャンセル方法に加えて、繰り返す方法も確認しましょう。

さらに、複数のタイマーをセットする方法や、動作しないときの対処方法も解説します。

タイマーのセット

setTimeoutでタイマーをセットする方法を解説します。タイマーをセットするには、以下のコードを入力します。

setTimeout(function(){console.log(“15秒経過しました”)},15000);

（15秒経過後に「15秒経過しました」と表示させます）

上記のように、引数にファンクションがあると可読性が下がってしまうため、以下のようにファンクションに変数を入れておくのもおすすめです。

var fn = function() {
console.log(“15秒経過しました”);
};
var tm = 15000;
setTimeout(fn,tm);

setTimeoutは第二引数に与えられた実行タイミングで、第一引数に定義された処理内容を1度実行します。よって、第一引数には表示させたい処理内容を実行させます。今回の例でいうと、「15秒経過しました」の引数が第一引数です。

タイマーのキャンセル

setTimeoutのタイマーをキャンセルする場合は、clearTimeout関数を使用してタイマーを停止します。上記でセットした内容のタイマーをキャンセルさせる方法は、以下のとおりです。

var fn = function() {
alert(“15秒経過しました”);
};
var tm = 15000;
var id = setTimeout(fn,tm);
function clickStop (){
clearTimeout(id);
}

clearTimeoutを利用することで、ストップボタンを押したらタイマーが停止し、アラートのダイアログが表示されないようにします。

タイマーの繰り返し

一定時間ごとに処理を繰り返させるならsetIntervalが適していますが、setTimeoutを使用してタイマーを繰り返すことも可能です。処理する方法は以下のとおりです。


    <script>
  let count = 0;
  const countUp = () => {
    console.log(count++);
    setTimeout(countUp, 15000);
  } 
  countUp();
</script>

（一度処理が終わった時点から15秒後に同じ処理を繰り返します。）

setIntervalで繰り返す場合とsetTimeoutで繰り返す場合には、同じ処理を繰り返す動作でも違いがあります。

setInterval：処理開始時点から一定時間ごとに繰り返す
setTimeout：処理終了時点から一定時間ごとに繰り返す

このように、処理の開始までに要する時間が異なります。setIntervalは1回分の動作にかかる時間がインターバルの時間を超えてしまうと不具合が起こるため、時間設定には注意が必要です。不具合が気になるなら、setTimeoutを使用しましょう。

setIntervalを使った繰り返し処理の場合

setIntervalを使用して繰り返す場合の処理方法は、以下のとおりです。

var fn = function() {
alert(“15秒経過しました（” + i + “回目）”);
i++;
};
var tm = 15000;
var i = 1;
setInterval(fn,tm);

setIntervalの繰り返し回数に制限をかけられます。setTimeoutのタイマーをキャンセルさせるためにはclearTimeoutを使用しますが、setIntervalに制限をかけるにはclearIntervalを使用します。処理方法は以下のとおりです。

var fn = function() {
alert(“15秒経過しました（” + i + “回目）”);
if(i > 5) clearInterval(id);
i++;
}
var tm = 15000;
var i = 1;
var id = setInterval(fn,tm);

上記を処理することで、15秒ごとに「15秒経過しました」を5回繰り返して、タイマーが停止します。

複数のタイマーをセット

setTimeoutは複数のタイマーを同時に起動させられます。30秒のタイマーの後に、もうひとつのタイマーを起動させる方法を紹介します。処理方法は以下のとおりです。

setTimeout(function() {
console.log(‘1つ目のタイマー’);

setTimeout(function() {
console.log(‘2つ目のタイマー’);
}, 15000);

}, 30000);

上記の処理で、1つ目のタイマーである30秒で処理した後、15秒で処理する2つ目のタイマーが起動します。今回は2つのタイマーの例を紹介しましたが、2つ目のタイマーの後にさらにタイマーを処理して、いくつものタイマーを起動させることも可能です。

setTimeoutが動作しないとき

setTimeoutを正常に動作させるには、指定方法を理解しておく必要があります。思うようにsetTimeoutが動作しないときは、「第一引数に指定した関数に()を付与していないか」を確認しましょう。()を付与すると、関数に対してタイマーは起動せずに、すぐ処理されてしまいます。

setTimeout()メソッドには第三引数が存在しているため、第三引数に引数となる値を設定することで、正常に動作します。

たとえば、5秒後に『Hello Suzuki』と処理したいとします。

第三引数の存在を踏まえた正しい処理方法は、以下のとおりです。

function hello(name) {
console.log(‘Hello,’ + name);
}

setTimeout(hello, 5000, ‘Suzuki’);

setTimeout()の第三引数に値を設定しているため、正常に動作します。

setTimeoutの注意点

setTimeoutでの注意点は、これまでに解説した内容以外にも、気をつけるポイントが2つあります。

指定した箇所以外にも制御が移る場合がある
重い処理が必要な部分がある場合、その分setTimeoutの処理が遅れる可能性がある

これらも踏まえてsetTimeoutを使用しましょう。

まとめ

setTimeoutとは一定時間後に1度処理するように指示する、タイマーの役割をする関数です。setTimeoutは日ごろ利用しているゲームやサイトでも使用されています。

setTimeoutと同じく、一定時間経過後に動作させる関数としてsetIntervalもあります。両者は一定時間経過後に処理する回数に違いがあり、setTimeoutが1度に対して、setIntervalは指定時間ごとに処理を繰り返す関数です。それぞれの特徴を理解して、用途に合わせて使い分けましょう。

投稿者

デジタルトレンドナビ編集部

システム開発、Webサイト制作、ECサイトの構築・運用、デジタルトランスフォーメーション（DX）など、デジタルビジネスに関わる多岐の領域において、最新のトレンド情報や実践的なノウハウを発信してまいります。

View all posts