====== JavaScriptとSleep ======
JavaScriptのsetTimeoutとclearTimeoutを使ってsleepのような動作を行うサンプルです。
===== サンプルの概要 =====
3X3に敷き詰められた正方形の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 =====
===== 参考文献 =====
[[http://www.red.oit-net.jp/tatsuya/java/noodles.htm|イヌでもわかるJavaScript講座 ラーメンタイマー]]\\
[[http://www.tohoho-web.com/js/window.htm#Timer|タイマ｜とほほのJavaScriptリファレンス]]
===== 関連記事 =====
[[http://hansendo.com/blog/lebenswerk/javascript-the-%E3%83%8B%E3%82%BBsleep-%E5%86%8D%E3%81%B3_2784|JavaScript the ニセSleep 再び｜帆船堂 電算STUDIO]]