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>

 

在此，我用過第二種方法，簡單可行！！