jQuery hover 延时器

在上一篇文章 《鼠标事件延时切换插件》 中，我已经写了几个简单的延时器的例子，今天突然想到jQuery的自定义动画的animate方法可以使用delay，例如：

1 $('#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

演示

jQuery.mouseDelay.html

另外，让官方delay方法支持hover可以这样：

(function ($) {

    $.fn._delay = $.fn.delay;

    $.fn.delay = function () {

        var arg = arguments,

            tid = '${tid}';

        

        this._hover = this.hover;



        this.hover = function (over, out) {

            over = over || $.noop;

            out = out || $.noop;

            this._hover(function (event) {

                var elem = this;

                

                elem[tid] && clearTimeout(elem[tid]);

                elem[tid] = setTimeout(function () {

                    over.call(elem, event);

                }, arg[0]);

                

            }, function (event) {

                var elem = this;

                

                elem[tid] && clearTimeout(elem[tid]);

                elem[tid] = setTimeout(function () {

                    out.call(elem, event);

                }, arg[0]);

            });



            return this;

        };



        return this._delay.apply(this, arg);

    };

})(jQuery);

planeArt.cn原创文章，原文地址：http://www.planeart.cn/?p=1073