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