JavaScript 一定時間後に処理を実行させるサンプル（setTimeout）

投稿日：2018年11月4日

数秒後に実行される処理を作りたい！

時間差で数秒後に処理したい事がたまにありますよね。
そんな時はJavaScriptのsetTimeoutを使うと簡単に実現することができます。

サンプルを作ったので見ていってくださいね。

今回はボタンを押されたら1秒後にアラートが出るプログラムを作成してみましょう！

<button id="btn01">1秒後にアラート</button>

1	<button id="btn01">1秒後にアラート</button>

document.getElementById("btn01").onclick = function() {
  setTimeout(btn01_func, 1000);
}
function btn01_func() {
  alert("1秒後にアラート");
}

document.getElementById("btn01").onclick = function() {

setTimeout(btn01_func, 1000);

}

function btn01_func() {

alert("1秒後にアラート");

}

setTimeout(btn01_func, 1000)が今回のミソになります。
btn01_funcは一定時間経過後に実行される関数を指定します。
1000は1000ミリ秒待つことを表しています。

つまり、これでbtn01がクリックされると1秒後にbtn01_func関数が実行されてアラートが表示されることになります。
簡単ですね。

もし関数を使い回す必要がないのであれば、無名関数にすると分かりやすいと思います。
関数名を記載する箇所に無名関数を直接書けばOKです。
こちらの方が分かりやすくて良いですよね。

<button id="btn02">3秒後にアラート</button>

1	<button id="btn02">3秒後にアラート</button>

document.getElementById("btn02").onclick = function() {
  setTimeout(function(){
    alert("3秒後にアラート");
  }, 3000);
}

document.getElementById("btn02").onclick = function() {

setTimeout(function(){

alert("3秒後にアラート");

}, 3000);

}

大きな画面で見る場合はこちら

意外と使う機会が多いので、覚えておいて損は無いですよ！

執筆者：sasaki