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');

API说明

方法参数说明mouseDelay (speed, group)速度, 设置延时分组名称设置延时触发效果. 两个参数都是可选的mouseDelayPause()[无]冻结选定元素的延时器jQuery.mouseDelay.pause (group) 延时分组名称冻结指定分组的延时器jQuery.mouseDelay.get ()[无]获取一个不重复的分组名