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动态添加删除select项(实现代码)
Sep 03 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
JQuery学习总结【二】
Dec 01 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
node实现基于token的身份验证
Apr 09 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
JavaScript实现点击图片换背景
Nov 20 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初学者们头痛的十四个问题
2007/01/15 PHP
php生成html文件方法总结
2014/12/01 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
javascript 面向对象继承
2009/11/26 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python实现八大排序算法(2)
2017/09/14 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Django通过json格式收集主机信息
2020/05/29 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
公司成立感言
2014/01/11 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
会议简报格式范文
2015/07/20 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python