为了防止鼠标快速滑过div而加的时间限制:
在看延迟绑定时候看到,这也算是延迟绑定了?:(20130909)
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title></title> </head> <body> <div id="test" style="border: 1px solid #CCC; 100px; height: 100px; background: #666;">这是一个测试DIV 把鼠标放在上面2秒后会弹出他的ID</div> <script type="text/javascript"> // <![CDATA[ var delay=function(t,fn){ var i=0, j=10, t=(t*1000)/j, //把延迟时间平均分成10等份 _this=this, //解决this绑定问题,所以调用delay函数的时候,请处理好this指向本身对象 d=setInterval(function(){ i++; if(i==j){ clearInterval(d); fn.apply(_this); }; },t); _this.onmouseout=function(){ clearInterval(d); }; } document.getElementById("test").onmouseover=function(){ delay.apply(this,[2,function(){ alert(this.id) }]); //使用apply改变this指针 }; // ]]> </script> </body> </html>
(感觉在enter中应该要加一个clear,但是测试下来,感觉不加,也不会set更多的time 20130805)
不知道当时为啥会想得那么复杂 :
--------------------------------------------------------------------------setTimeout加参数20130805
--------------------------------------------------------------------------setTimeout加参数20130805
html:
$(".a").each(function(i) { $(this).mouseenter(function(){ t=setTimeout("$('.div').eq("+i+").fadeIn()",500) }).mouseleave(function(){ clearTimeout(t) $(".div").eq(i).fadeOut(); }) });
不知道当时为啥会想得那么复杂 :
$(".list").mouseenter(function() { if( $(this).data("time") ){ clearInterval( $(this).data("time") ); } var _this = $(this); $(this).data("time", setInterval(function(){ _this.children(".cover").animate({top: '0px'}); clearInterval( _this.data("time") ); _this.removeData("time"); },300)); }).mouseleave(function() { if( $(this).data("time") ){ clearInterval( $(this).data("time") ); $(this).removeData("time"); } $(this).children(".cover").animate({top: '145px'}); })
--------------------------------------------------------------------------setTimeout加参数20130805
var _sto = setTimeout; window.setTimeout = function(callback,timeout,param) { var args = Array.prototype.slice.call(arguments,2); var _cb = function() { callback.apply(null,args); } _sto(_cb,timeout); }
--------------------------------------------------------------------------setTimeout加参数20130805
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>And the winner isn't...</title> <style type="text/css"> a{width:100px; height:100px; background:#0FF; display: block; position:absolute} .div{ width:100px; height:100px; background:#f36; display:none; position:absolute} .warp{width:100px; height:100px; float:left; position:relative; margin:20px} </style> <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".warp").each(function(i) { $(this).mouseenter(function(){ t=setTimeout("$('.div').eq("+i+").fadeIn()",500) }).mouseleave(function(){ clearTimeout(t) $(".div").eq(i).fadeOut(); }) }); }) </script> </head> <body> <div class="warp" style=" "> <a href="#"></a> <div class="div"></div> </div> <div class="warp"> <a href="#"></a> <div class="div" style=""></div> </div> <div class="warp"> <a href="#"></a> <div class="div" style=""></div> </div> </body> </html>