jQuery hover 延時器實現代碼

例如：
複製代碼 代碼如下:
$('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之間延時800毫秒。

hover是否可以設計一個延時器呢？答案是肯定的。延時操作目的是為了防止使用者誤觸發事件，一般情況下滑鼠指標小於150毫秒的停留時間都可以被忽略。其實，如果入侵delay全能讓其作用在hover事件上，但是為了避免John Resig不斷的折騰jQuery而導致相容問題，還是老老實實的寫標準外掛程式比較好。
目標
繼承jQuery API的優雅：jQuery(expression).mouseDelay(150).hover(over, out)
不得破壞jQuery原型鏈
上述目標看起來很帥氣，實現起來卻非常簡單，僅僅十多行的代碼我都不好意思拿來拼湊文章：
原始碼
複製代碼 代碼如下:
/*!
* 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';
// 延時構造器
$.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函數，並截獲兩個回呼函數交給真正的hover函數處理
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;
};
// 凍結選定元素的延時器
$.fn[plugin + 'Pause'] = function () {
clearTimeout(this.data(etid));
return this;
};
// 靜態方法
$[plugin] = {
// 擷取一個唯一分組名稱
get: function () {
return id ++;
},
// 凍結指定分組的延時器
pause: function (group) {
clearTimeout(data[group]);
}
};
})(jQuery, 'mouseDelay');

API說明

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

下載

• jQuery.mouseDelay.js
• jQuery.mouseDelay.min.js

示範 

http://demo.jb51.net/js/2011/mouseDelay/index.htm

打包下載

planeArt.cn原創文章