jQuery hover 延时器实现代码


Posted in Javascript onMarch 12, 2011

例如:

$('#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.3water.com/js/2011/mouseDelay/index.htm

打包下载

planeArt.cn原创文章

Javascript 相关文章推荐
jQuery插件开发全解析
Oct 10 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
react-router中的属性详解
Jun 01 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
AngularJS表单验证功能
Oct 19 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
js中if语句的几种优化代码写法
Mar 12 #Javascript
鼠标事件延时切换插件
Mar 12 #Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 #Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 #Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 #Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 #Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 #Javascript
You might like
再说下636单管机
2021/03/02 无线电
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
一个PHP分页类的代码
2011/05/18 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP进程通信基础之信号
2017/02/19 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python装饰器初探(推荐)
2016/07/21 Python
Python操作MySQL数据库的方法
2018/06/20 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python实现微信防撤回神器
2019/04/29 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
Python实现简单猜数字游戏
2021/02/03 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
中学生爱国演讲稿
2013/12/31 职场文书
教师师德考核自我评价
2014/09/13 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
python实现双链表
2022/05/25 Python