【JavaScript】一定時間経過後に処理を実行する【setTimeout】

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで一定時間が経過した後に処理を実行する方法をご紹介しています。

一定の時間が経過したタイミングで処理を実行したいんだけど、良い方法ないかな?

上記の疑問にお答えしています。

では、解説していきます。

一定時間経過後に実行する処理とは?

一定時間経過後に実行する処理……文言だけだと何となくイメージがつかないですよね。なので具体的な例をいくつか列挙してみようと思います。

  • ページ読み込み完了して5秒後に特定の実行する
  • ボタンを押して3秒後に特定の処理を実行する
  • ページ内リンクをクリックして1秒後にスクロール

これらのように何らかのアクションが行われた後、指定した時間をおいて実行される処理を、本記事では一定時間が経過した後に実行する処理としています。

何かする→時間の経過を待つ→また何かする

という感じですね。実際に一定時間が経過した後に処理を組んでいきたいと思いますが、その前に本記事の内容を簡単に実現することができるsetTimeout()の使い方を見ていきましょう!

setTimeout()とは?

setTimeout()はJavaScriptに標準で用意してある関数です。引数に時間と関数を指定することができます。指定した時間が経過したとに関数の中身を実行するという処理を簡単に実装することができます。

構文は下記のようになっています。

window.setTimeout(function, duration);

functionには関数を、durationはミリ秒で時間間隔を指定します。そうすることでfunctionに指定した関数をdurationに指定したミリ秒後に実行するという処理を実現することができます。

setTimeout()の使い方がわかったところで、実際に一定時間が経過した後に処理を実行するスクリプトを作ってみましょう!

setTimeout()で一定時間が経過した後に処理を実行してみる

では実際に簡単な処理を作ってみます。本記事では、ページ上に表示されているボタンをクリックすると3秒後にアラートが表示されるという処理を作ってみたいと思います。下記にサンプルを用意していますので、参考にコーディングしてみてくださいね!

HTML

<button id="btn" type="button">Start!!</button>

JS

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
window.setTimeout(() => {
alert("3秒経過しました");
}, 3000);
});

DEMO

See the Pen
setTimeout|JavaScript
by ryohei (@intotheprogram)
on CodePen.

最後に

setTimeout()は色々応用が利く関数です。最近ではページの読み込み後にCookieの承諾を促すパネルを表示したり、全画面にオーバーレイする形で表示される広告などにも使用されています。その他アニメーションに組み込むことで表現の幅もぐんと広がります。ぜひ色々試してみてくださいね!

以上、JavaScriptで一定時間経過後に処理を実行するsetTimeout()のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。