クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

JavaScript

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

投稿日:

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

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

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

一定時間後に処理を実行させるサンプル その1

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

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

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

一定時間後に処理を実行させるサンプル その2

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

制作したサンプル

See the Pen JavaScript 一定時間後に処理を実行させるサンプル(setTimeout) by clue-design (@clue-design) on CodePen.0

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

 

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

-JavaScript

執筆者:

関連記事

no image

JavaScript クリックイベントをJavaScriptで実現するサンプル

JavaScriptでクリックイベントを実装しよう! 1、2箇所だけクリックイベントを実装したい時ってありますよね。 そのためだけにjQueryを読み込ませるのも表示速度が遅くなってもったいない気がし …


comment

メールアドレスが公開されることはありません。