jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
重復(fù)觸發(fā)就是防止用戶重復(fù)點(diǎn)擊提交數(shù)據(jù)了，我們一般都是點(diǎn)擊之后沒反應(yīng)會再次點(diǎn)擊了，這個不但要從用戶體驗(yàn)上來做好，還在要js或php程序腳本上做好，讓用戶知道點(diǎn)擊是己提交服務(wù)器正在處理，下面我就整理從腳本上來處理此重復(fù)觸發(fā)的問題。
很多時(shí)候事件會被快速重復(fù)觸發(fā)，比如 click，這樣就會執(zhí)行兩次代碼，造成很多后果。現(xiàn)在有比較多的解決方法，但幾乎都有局限性，比如一個 Ajax 表單，如果防止用戶一次點(diǎn)好多下可以在第一次點(diǎn)擊的時(shí)候凍結(jié)提交按鈕，直到允許再次點(diǎn)擊的時(shí)候再放開。很多人都這樣干，但在其他的情況就不是很有效了。
下面推薦一個不錯的方法，首先丟一個函數(shù)進(jìn)去。
var _timer = {};
function delay_till_last(id, fn, wait) {
if (_timer[id]) {
window.clearTimeout(_timer[id]);
delete _timer[id];
}
return _timer[id] = window.setTimeout(function() {
fn();
delete _timer[id];
}, wait);
}
使用方法
$dom.on('click', function() {
delay_till_last('id', function() {//注意 id 是唯一的
//響應(yīng)事件
}, 300);
});
上面的代碼可以讓點(diǎn)擊之后等待 300 毫秒，如果在 300 毫秒內(nèi)又發(fā)生了這個事件則廢除上一次點(diǎn)擊，重新計(jì)時(shí)，反復(fù)如此，直到完全等待了 300 毫秒再響應(yīng)事件。
這個函數(shù)很有用的，比如驗(yàn)證輸入或者根據(jù)輸入的郵箱實(shí)時(shí)拉去頭像而不用等到必須失焦再拉取。
例子
按鈕BUTTON類
a標(biāo)簽類
對于第一類情況，button有一個屬性是disabled控制其是否可以點(diǎn)擊,看代碼
<input type="button" value="Click" id="subBtn"/>
<script type="text/javascript">
function myFunc(){
//code
//執(zhí)行某段代碼后可選擇移除disabled屬性，讓button可以再次被點(diǎn)擊
$("#subBtn").removeAttr("disabled");
}
$("#subBtn").click(function(){
//讓button無法再次點(diǎn)擊
$(this).attr("disabled","disabled");
//執(zhí)行其它代碼，比如提交事件等
myFunc();
});
</script>
以上這篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery+jsp實(shí)現(xiàn)省市縣三級聯(lián)動效果(附源碼)
這篇文章主要介紹了jQuery+jsp實(shí)現(xiàn)省市縣三級聯(lián)動效果,以完整實(shí)例形式分析了jQuery結(jié)合jsp讀取MySQL數(shù)據(jù)庫操作實(shí)現(xiàn)省市縣三級聯(lián)動效果的相關(guān)技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
jQuery插件 tabBox實(shí)現(xiàn)代碼
最近對js以及jq產(chǎn)生了濃厚的興趣，看到j(luò)q有很多很好用的插件，功能各異，包括webUI,jqGrid等等。心里萌發(fā)了制作屬于自己的jq插件的想法。2010-02-02
基于JQuery實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
這篇文章主要為大家詳細(xì)介紹了基于JQuery實(shí)現(xiàn)圖片輪播效果，利用Jquery制作焦點(diǎn)圖左右輪播特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了jquery中$.ajax方法提交表單的方法及介紹，希望對大家有所幫助2014-11-11
jQuery購物車插件jsorder用法(支持后臺處理程序直接轉(zhuǎn)換成DataTable處理)
這篇文章主要介紹了jQuery購物車插件jsorder用法,結(jié)合實(shí)例形式分析了購物車jsorder插件基于ajax與后臺交互的相關(guān)技巧,需要的朋友可以參考下2016-06-06
jQuery實(shí)現(xiàn)邊框動態(tài)效果的實(shí)例代碼
這篇文章給大家分享了一個jQuery邊框動態(tài)的效果，當(dāng)鼠標(biāo)移動到邊框區(qū)域的時(shí)候，邊框會有個動態(tài)的加載動畫效果，實(shí)現(xiàn)的效果真的非常不錯，下面來一起看看吧。2016-09-09
大家應(yīng)該都會有這樣一種感覺，data函數(shù)在jQuery中看起來很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細(xì)一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來詳細(xì)深入的學(xué)習(xí)下jQuery中的data()，感興趣的朋友們可以參考借鑒。2016-12-12
最近發(fā)現(xiàn)一個不錯的基于jquery的插件thickBox ，感覺比facebox好用。但因?yàn)閖query官方不推薦使用。所以這個只是學(xué)習(xí)的朋友，不建議使用這個。2010-09-09
將jquery.qqFace.js表情轉(zhuǎn)換成微信的字符碼
這篇文章主要介紹了將jquery.qqFace.js表情轉(zhuǎn)換成微信的字符碼的方法，以及jquery.qqface.js的使用方法，需要的朋友可以參考下2017-12-12
這篇文章主要介紹了封裝的jquery翻頁滾動。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11