JavaScriptのsetTimeoutとsetInterval

ブラウザなどで、ページが表示されてから一定時間後に表示を変更したり、ページを遷移させたいというときには、setTimeoutとsetIntervalという関数を使うことができます。

・setTimeout

setTimeoutは、指定した時間後に一度だけ動作するものです。

指定した時間ごとに何度も動作させたい場合は、setIntervalという別の関数を使います

setIntervalは、読み込まれてから延々と実行され続けますが、clearInterval関数で、タイマーをとめることができます。

実際にサンプルを書いてみます。

setTimeout*1;

}, 2000);

２秒ごとにランダムな数字が出るように設定します。

実際コンソールで動かしてみると、２秒ごとに数字が出力されていると思います。

しかし、数字が出続けても困るのでどのように止めるかも重要になってきます。

そこで必要なのが clearInterval です。

繰り返しているものを止めるものです。セットで覚えておきましょう。

const id = setInterval*2;

}, 2000);

// clearInterval(id);

clearInterval にsetInterval が作っている「id」を渡してあげます。これはもう仕組みとして覚える必要があります。

コンソールで clearInterval(id); と打ち込むと繰り返し処理が止まります。

WEBページが画面上に表示されてからすぐではないタイミングでアラートを表示させたいというときや、数秒後にリロードさせるために、setTimeoutを使って再読み込みし、サーバー側の最新の状態を確認することができるようになります

setIntervalを使うタイミングは、スライドショーなど、画面上に表示させてあるものを変更したり動かしたりするときによく使われます。

様々な用途で使うことができるので本日は紹介させてもらいました。

*1:) => {

console.log('おーい');

}, 3000);