jQuery hover 延時(shí)器實(shí)現(xiàn)代碼

2019-11-20 23:54:20

字體：大中小

供稿：網(wǎng)友

例如：

 
$('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之間延時(shí)800毫秒。 

hover是否可以設(shè)計(jì)一個(gè)延時(shí)器呢？答案是肯定的。延時(shí)操作目的是為了防止用戶誤觸發(fā)事件，一般情況下鼠標(biāo)指針小于150毫秒的停留時(shí)間都可以被忽略。其實(shí)，如果入侵delay全能讓其作用在hover事件上，但是為了避免John Resig不斷的折騰jQuery而導(dǎo)致兼容問題，還是老老實(shí)實(shí)的寫標(biāo)準(zhǔn)插件比較好。
目標(biāo)
繼承jQuery API的優(yōu)雅：jQuery(expression).mouseDelay(150).hover(over, out)
不得破壞jQuery原型鏈
上述目標(biāo)看起來很帥氣，實(shí)現(xiàn)起來卻非常簡單，僅僅十多行的代碼我都不好意思拿來拼湊文章：
源代碼

復(fù)制代碼代碼如下:

 
/*! 
* 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'; 
// 延時(shí)構(gòu)造器 
$.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; 
// 偽裝一個(gè)hover函數(shù)，并截獲兩個(gè)回調(diào)函數(shù)交給真正的hover函數(shù)處理 
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; 
}; 
// 凍結(jié)選定元素的延時(shí)器 
$.fn[plugin + 'Pause'] = function () { 
clearTimeout(this.data(etid)); 
return this; 
}; 
// 靜態(tài)方法 
$[plugin] = { 
// 獲取一個(gè)唯一分組名稱 
get: function () { 
return id ++; 
}, 
// 凍結(jié)指定分組的延時(shí)器 
pause: function (group) { 
clearTimeout(data[group]); 
} 
}; 
})(jQuery, 'mouseDelay'); 

API說明

方法	參數(shù)	說明
mouseDelay (speed, group)	速度, 設(shè)置延時(shí)分組名稱	設(shè)置延時(shí)觸發(fā)效果. 兩個(gè)參數(shù)都是可選的
mouseDelayPause()	[無]	凍結(jié)選定元素的延時(shí)器
jQuery.mouseDelay.pause (group)	延時(shí)分組名稱	凍結(jié)指定分組的延時(shí)器
jQuery.mouseDelay.get ()	[無]	獲取一個(gè)不重復(fù)的分組名