【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()のご紹介でした！