快捷導(dǎo)航

jQuery hover 延時器實現(xiàn)代碼

更新時間：2011年03月12日 21:48:48 作者：

在上一篇文章《鼠標(biāo)事件延時切換插件》中，我已經(jīng)寫了幾個簡單的延時器的例子，今天突然想到j(luò)Query的自定義動畫的animate方法可以使用delay

例如：

 
$('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之間延時800毫秒。 

hover是否可以設(shè)計一個延時器呢？答案是肯定的。延時操作目的是為了防止用戶誤觸發(fā)事件，一般情況下鼠標(biāo)指針小于150毫秒的停留時間都可以被忽略。其實，如果入侵delay全能讓其作用在hover事件上，但是為了避免John Resig不斷的折騰jQuery而導(dǎo)致兼容問題，還是老老實實的寫標(biāo)準(zhǔn)插件比較好。
目標(biāo)
繼承jQuery API的優(yōu)雅：jQuery(expression).mouseDelay(150).hover(over, out)
不得破壞jQuery原型鏈
上述目標(biāo)看起來很帥氣，實現(xiàn)起來卻非常簡單，僅僅十多行的代碼我都不好意思拿來拼湊文章：
源代碼

復(fù)制代碼代碼如下:

 
/*! 
* jQuery.mouseDelay.js v1.2 
* http://www.planeart.cn/?p=1073 
* Copyright 2011, TangBin 
* Dual licensed under the MIT or GPL Version 2 licenses. 
*/ 
(function ($, plugin) { 
var data = {}, id = 1, etid = plugin + 'ETID'; 
// 延時構(gòu)造器 
$.fn[plugin] = function (speed, group) { 
id ++; 
group = group || this.data(etid) || id; 
speed = speed || 150; 
// 緩存分組名稱到元素 
if (group === id) this.data(etid, group); 
// 暫存官方的hover方法 
this._hover = this.hover; 
// 偽裝一個hover函數(shù)，并截獲兩個回調(diào)函數(shù)交給真正的hover函數(shù)處理 
this.hover = function (over, out) { 
over = over || $.noop; 
out = out || $.noop; 
this._hover(function (event) { 
var elem = this; 
clearTimeout(data[group]); 
data[group] = setTimeout(function () { 
over.call(elem, event); 
}, speed); 
}, function (event) { 
var elem = this; 
clearTimeout(data[group]); 
data[group] = setTimeout(function () { 
out.call(elem, event); 
}, speed); 
}); 
return this; 
}; 
return this; 
}; 
// 凍結(jié)選定元素的延時器 
$.fn[plugin + 'Pause'] = function () { 
clearTimeout(this.data(etid)); 
return this; 
}; 
// 靜態(tài)方法 
$[plugin] = { 
// 獲取一個唯一分組名稱 
get: function () { 
return id ++; 
}, 
// 凍結(jié)指定分組的延時器 
pause: function (group) { 
clearTimeout(data[group]); 
} 
}; 
})(jQuery, 'mouseDelay'); 

API說明

方法	參數(shù)	說明
mouseDelay (speed, group)	速度, 設(shè)置延時分組名稱	設(shè)置延時觸發(fā)效果. 兩個參數(shù)都是可選的
mouseDelayPause()	[無]	凍結(jié)選定元素的延時器
jQuery.mouseDelay.pause (group)	延時分組名稱	凍結(jié)指定分組的延時器
jQuery.mouseDelay.get ()	[無]	獲取一個不重復(fù)的分組名