JavaScript

JavaScript: setTimeout を使った処理の遅延

2013年8月23日

クライアントサイドプログラミングをしている時、特に jQuery でアニメーション効果が有効になっていると、イベント発生時にターゲットとなる HTML エレメントが生成されていなくて思い通りのロジック実装ができない・・・ということがままあると思います。
こんな時はアニメーションに続く処理を少し遅らせることで問題のワークアラウンドができたりします。今回は setTimeout を使った処理開始遅延の実装例をご紹介・・・。

<head runat="server">
	<!-- jQuery を使う場合は参照を追加します -->
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function () {
	    $("#timeout").click(function () {
	        setTimeout(function () {
	            alert("delayed!!"); // 実際の処理
	        }, 2000); // ボタンクリックのタイミングから 2 秒遅らせます。
	    });
	});
	</script>
</head>
<body>
	<input id="timeout" type="button" value="timeout"/>
</body>

-JavaScript