mouseenter和mouseout中间的时间控制

为了防止鼠标快速滑过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)
$(".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>
 
原文地址:https://www.cnblogs.com/della/p/3297787.html