忘れられた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を使用しています。

DEMO

参考文献

Print/export
QR Code
QR Code JavaScriptとSleep (generated for current page)