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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
js中作用域的实例解析
Mar 16 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
react-native之ART绘图方法详解
Aug 08 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
返回上一个url并刷新界面的js代码
Sep 12 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程序的方法小结
2012/02/23 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php动态绑定变量的用法
2015/06/16 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
简述php环境搭建与配置
2016/12/05 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python复制与引用用法分析
2015/04/08 Python
教你学会使用Python正则表达式
2017/09/07 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
网络维护中文求职信
2014/01/03 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
质量承诺书范文
2014/03/27 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
redis 查看所有的key方式
2021/05/07 Redis
Golang二维数组的使用方式
2021/05/28 Golang
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python