クライアントサイドのJavaScriptではsetTimeout関数を使用する場面が度々あります。その中でsetTimeout関数の第2引数へ0が指定されている事があります。この「0」(0ms)がどういう意図で使用されているのかメモしておきます。
基本的にsetTimeout関数は主に以下の2通りの用途で使用されます。第2引数へ0を指定する場合は2の用途で使用されます。
setTimeout関数の用途
- 指定時間後に関数を実行する場合
- イベントハンドラ内の処理が確実に完了してから処理を実行したい場合
HTMLサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" charset="utf-8" src="./js/jquery-1.9.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="./js/timeout-sample.js"></script> <title>timeout-sample</title> </head> <body> <input type="button" name="btn1" id="btnTimeoutSample1" value="timeout"> </body> </html> |
JavaScriptサンプル
※イベントハンドラはjQueryで記載しています。
-
以下のサンプルではclickイベント内の処理が全て完了した後に、setTimeout関数内の処理が実行される事を保証してくれます。
今回は簡単に説明するため処理内容は「console.log」しか使用していませんが、大量のDOM要素を取得する場合など処理に時間が掛かるケースや処理が煩雑になっていて実行順序が把握しにくいソースをメンテする際などで重宝されるテクニックの一つです。
|
1 2 3 4 5 6 7 8 |
$(function() { $("#btnTimeoutSample1").click(function() { setTimeout( function() { console.log('2回目'); }, 0); console.log('1回目'); }); }); |
JavaScriptサンプルの実行結果「コンソール」
|
1 2 |
1回目 2回目 |