jQuery 如何防止相同的事件快速重複觸發的方法

下面我就為大家分享一篇jQuery 防止相同的事件快速重複觸發方法。具有很好的參考價值，希望對大家有幫助。

重複觸發就是防止使用者重複點擊提交資料了，我們通常都是點擊之後沒反應會再點擊了，這個不但要從使用者體驗上來做好，還在要js或php程式腳本上做好，讓使用者知道點擊是己提交伺服器正在處理，下面我就整理從腳本上來處理此重複觸發的問題。

很多時候事件會被快速重複觸發，像是 click，這樣就會執行兩次程式碼，造成很多後果。現在有比較多的解決方法，但幾乎都有局限性，例如一個 Ajax 表單，如果防止用戶一次點好多下可以在第一次點擊的時候凍結提交按鈕，直到允許再次點擊的時候再放開。很多人都這樣乾，但在其他的情況就不是很有效了。

下面推薦一個不錯的方法，先丟一個函數進去。

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 是唯一的 
  //响应事件 
 }, 300); 
});

上面的程式碼可以讓點擊之後等待300 毫秒，如果在300 毫秒內又發生了這個事件則廢除上一次點擊，重新計時，反覆如此，直到完全等待了300 毫秒再響應事件。

這個函數很有用的，例如驗證輸入或根據輸入的郵箱即時拉去頭像而不用等到必須失焦再拉取。

範例

按鈕BUTTON類別

a標籤類別

對於第一類情況，button有一個屬性是disabled控制是否可以點擊,看程式碼

<input type="button" value="Click" id="subBtn"/> 
<script type="text/javascript"> 
function myFunc(){ 
 //code 
 //执行某段代码后可选择移除disabled属性，让button可以再次被点击 
 $("#subBtn").removeAttr("disabled"); 
} 
$("#subBtn").click(function(){ 
 //让button无法再次点击 
 $(this).attr("disabled","disabled"); 
 //执行其它代码，比如提交事件等 
 myFunc(); 
}); 
</script>

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

使用vue2.0.js實作多級連動選擇器

使用mint-ui實作省市區三級連動效果

使用vue實作二級路由設定方法

#

以上是jQuery 如何防止相同的事件快速重複觸發的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！