例如：
代碼如下:
$('#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原創文章