こんにちは、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()のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

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

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