hover事件延迟处理代码实例详解
大多数情况下，网站的hover事件都没有进行延迟处理。
但是有些时候延迟处理可以提高网站的性能。比如，我们看完第一个选项卡的内容之后，再去看第四个选项卡的内容，这个时候可能鼠标会滑过第二个、第三个，于是这两个选项卡的内容就有可能被展示，这并不是我们想要的，使用hover事件延迟处理可以有效解决此问题。先看一个没有延迟效果的选项卡:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:12px Verdana, Geneva, sans-serif;
color:#404040;
}
.tabs {
margin:10px 0 0 20px;
width:360px;
position:relative;
overflow:hidden;
height:160px;
}
.tabs span {
z-index:2;
font-size:12px;
border:1px solid #d5d5d5;
width:95px;
height:25px;
line-height:25px;
text-align:center;
float:left;
margin-right:5px;
cursor:pointer;
}
span.active{
background-color:#d5d5d5;
}
#tab-01, #tab-02, #tab-03{
position:absolute;
top:26px;
left:0;
width:338px;
padding:10px;
height:93px;
border:1px solid #d5d5d5;
z-index:1;
}
#tab-02, #tab-03{
display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.tabs span').mouseover(function () {
$('.tabs div').hide();
$(this)
.siblings('span')
.removeClass('active')
.end()
.addClass('active')
.next('div')
.show();
});
});
</script>
</head>
<body>
<div class="tabs">
<span class="active">前端教程网一</span>
<div id="tab-01">前端教程网一</div>
<span>前端教程网二</span>
<div id="tab-02">前端教程网二</div>
<span>前端教程网三</span>
<div id="tab-03">前端教程网三</div>
</div>
</body>
</html>
上面的代码实现了普通的选项卡效果，当我们无意中滑过任何一个选项卡都会产生效果。
下面就看使用延迟技术改造上面的代码，如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:12px Verdana, Geneva, sans-serif;
color:#404040;
}
.tabs {
margin:10px 0 0 20px;
width:360px;
position:relative;
overflow:hidden;
height:160px;
}
.tabs span {
z-index:2;
font-size:12px;
border:1px solid #d5d5d5;
width:95px;
height:25px;
line-height:25px;
text-align:center;
float:left;
margin-right:5px;
cursor:pointer;
}
span.active{
background-color:#d5d5d5;
}
#tab-01, #tab-02, #tab-03{
position:absolute;
top:26px;
left:0;
width:338px;
padding:10px;
height:93px;
border:1px solid #d5d5d5;
z-index:1;
}
#tab-02, #tab-03{
display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.fn.hoverDelay = function (options) {
var defaults = {
hoverDuring: 200,
hoverEvent: function () {
$.noop();
}
};
var sets = $.extend(defaults, options || {});
var hoverTimer, outTimer;
return $(this).each(function () {
$(this).hover(function () {
clearTimeout(hoverTimer);
var _this = this;
hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring,_this);
});
});
}
var done=function (_this) {
$('.tabs div').hide();
$(_this)
.siblings('span')
.removeClass('active')
.end()
.addClass('active')
.next('div')
.show();
};
$('.tabs span').hoverDelay({ hoverEvent: done });
});
</script>
</head>
<body>
<div class="tabs">
<span class="active">前端教程网一</span>
<div id="tab-01">前端教程网一</div>
<span>前端教程网二</span>
<div id="tab-02">前端教程网二</div>
<span>前端教程网三</span>
<div id="tab-03">前端教程网三</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）. $.fn.hoverDelay = function (options) {}，为jquery实例对象自顶一个hoverDelay方法，此方法实现了延迟效果。
（3）.var defaults = {
hoverDuring: 200,
hoverEvent: function () {
$.noop();
}
}，此对象存储的是一些默认参数值。
比如默认延迟时间，和hover事件处理函数。
（4）.var sets = $.extend(defaults, options || {})，和并自定义参数对象和默认对象，也就是说如果规定了自定义的参数则使用自定义的参数，否则使用默认参数。
（5）.var hoverTimer, outTimer，声明两个变量，后面会用到。
（6）.return $(this).each(function () {
$(this).hover(function () {
clearTimeout(hoverTimer);
var _this = this;
hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring,_this);
});
})，前面加个return是为了实现链式调用。
$(this).each(function () {})，遍历每一个匹配的元素。
并且为每一个匹配元祖注册hover事件处理函数。
clearTimeout(hoverTimer)目的是为了停止前一将要执行的事件处理函数，这样的话不会不出现当我们连续滑过多个选项卡，会依次执行的情况，只会执行最后一个选项卡的切换。
（7）.var _this = this，将当前this指向赋值给变量_this。
（8）.hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring,_this)，延迟执行事件处理函数。
（9）.var done=function (_this) {
$('.tabs div').hide();
$(_this)
.siblings('span')
.removeClass('active')
.end()
.addClass('active')
.next('div')
.show();
}，事件处理函数，里面是非常简单的处理。
二.相关阅读:
（1）.$.fn可以参阅$.fn作用简单介绍一章节。
（2）.$.extend()可以参阅jQuery.extend()一章节。
（3）.each()可以参阅jQuery each()一章节。
（4）.hover()可以参阅jQuery hover事件一章节。
（5）.clearTimeout()可以参阅clearTimeout()一章节。
（6）.setTimeout()函数可以参阅setTimeout()一章节。
（7）.siblings()可以参阅jQuery siblings()一章节。
（8）.removeClass()可以参阅jQuery removeClass()一章节。
（9）.end()可以参阅jQuery end()一章节。
（10）.next()可以参阅jQuery next()一章节。
hover事件延迟处理代码实例详解，这样的场景在实际项目中还是用的比较多的，关于hover事件延迟处理代码实例详解就介绍到这了。
hover事件延迟处理代码实例详解属于前端实例代码，有关更多实例代码大家可以查看。