【JavaScript】n秒処理を遅らせて実行する方法(setTimeout)

2023年1月28日2023年7月17日

本記事では、JavaScriptを使ってn秒経過した後に特定の処理を実行する方法について解説しています。

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

誰でも分かるように嚙み砕いて説明してくれる
アニメーションの知識が深く学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2024/04/14 02:03時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

setTimeOutメソッド

n秒処理を遅らせるには「setTimeoutメソッド」を使用します。基本的な使い方は以下のとおりです。

setTimeout(function, delay);

function：実行させたい処理を記述
delay：処理の遅延時間をミリ秒 (1/1000 秒) 単位で指定。3秒遅らせて処理を実行させたい場合は「3000」を指定する。

delayは省略することも可能です。省略した場合は内部的に「0」が指定されます。

サンプルコード

setTimeOutメソッドを使ってサンプルコードを用意しました。内容は3秒後にアラートが出現する簡単なものです。

/* 関数を分ける記述 */
const viewAlert = () => alert('3秒経ちました！');
setTimeout(viewAlert, 3000);

/* 関数をまとめて記述 */
setTimeout(()=> {
    alert('3秒経ちました！');
},3000);

お手元のPCで上記サンプルコードを実行すると、3秒後に「3秒経ちました！」と記述されたアラートが出現することが確認できます。