例如： 

复制代码代码如下:

$('#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 ()	[无]	获取一个不重复的分组名

下载 

演示