1. 程式人生 > >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>