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插件制作 提示框插件实现代码
Aug 17 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
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 中的类
2006/10/09 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
pycharm设置注释颜色的方法
2018/05/23 Python
python频繁写入文件时提速的方法
2019/06/26 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
《神奇的克隆》教学反思
2014/04/10 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
白酒营销策划方案
2014/08/17 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
展览会邀请函
2015/02/02 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS