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 相关文章推荐
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
原生JavaScript实现购物车
Jan 10 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
php 随机生成10位字符代码
2009/03/26 PHP
基于php缓存的详解
2013/05/15 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
深入理解PHP中的count函数
2016/05/31 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
JS验证字符串功能
2017/02/22 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
django+mysql的使用示例
2018/11/23 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python写日志文件操作类与应用示例
2019/07/01 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
C语言50道问题
2014/10/23 面试题
研究生毕业自我鉴定范文
2014/03/27 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Golang ort 中的sortInts 方法
2022/04/24 Golang