jQuery hover 延时器实现代码
作者：
在上一篇文章 《鼠标事件延时切换插件》 中，我已经写了几个简单的延时器的例子，今天突然想到jQuery的自定义动画的animate方法可以使用delay
例如：
$('#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');
下载
演示
http://demo.jb51.net/js/2011/mouseDelay/index.htm
打包下载
planeArt.cn原创文章
复制代码 代码如下:
$('#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 () | [无] | 获取一个不重复的分组名 |
演示
http://demo.jb51.net/js/2011/mouseDelay/index.htm
打包下载
planeArt.cn原创文章