忘れられたWiki
COMHUETTE - 帆船堂電算STUDIO CODEX

JavaScriptとSleep

JavaScriptのsetTimeoutとclearTimeoutを使ってsleepのような動作を行うサンプルです。

サンプルの概要

3×3に敷き詰められた正方形のDIVにマウスのカーソルを合わせると対象の色が反転します。
Sleep_Offの場合、対象にカーソルを合わせた時点で即時に色が反転します。
Sleep_ONの場合、対象にカーソルを合わせた時点から200ミリ秒後に色が反転します。

コード

jQuery(function($) {
	var chotto_matte;
	$('dd.sleep-off div').mouseover(function(){
		$(this).toggleClass('bk');
	});
	$('dd.sleep-on div').mouseover(function(){
		var tmp = this;
		chotto_matte = setTimeout(function() {
			$(tmp).toggleClass('bk');
		}, 200);
	});
	$('dd.sleep-on div').mouseout(function() {
		clearTimeout(chotto_matte);
	});
});

※jQueryを使用しています。