jQuery單擊后禁用href並在3秒后啟用

Question

我的網站有許多<a target="_blank">會調用api

我需要防止雙擊這些按鈕。

這是我所做的

.disable {
    pointer-events: none;
}

$(document).ready(function(e) {
    $('a').click(function(){
        $(this).addClass('disable');

        setTimeout(function(){
            $(this).removeClass('disable');
        }, 3000);
    });
});

因為它的目標空白，所以我需要那些在幾秒鍾后仍然可以工作的href。

我以某種方式無法再次啟用這些按鈕

Answer 1

問題是， this里面setTimeout是不一樣的this外面。

您可以執行以下操作：

var that = $(this);
that.addClass('disable');

setTimeout(function(){
  that.removeClass('disable');
}, 3000);

然后它應該工作

Answer 2

您可以執行類似jQuery('.disable').click(function(evt) { evt.preventDefault() }) 。 不過，這只會停止點擊。 一直跳到按下Enter鍵或其他互動可能仍會觸發訪問。

一種“安全”的方法可能是使用JS暫時將href屬性移出並移回（例如，將原始href目標存儲在某個地方，並替換為javascript:return false;或者完全刪除href屬性）。

Answer 3

這是一個范圍界定問題。 在setTimeout內部， this不再引用您要修改的錨元素； 而是指向瀏覽器窗口（因為setTimeout是window對象上的方法）。

解決這一經典的方式是通過捕獲this在一個單獨的變量，它仍然會在范圍內setTimeout ：

 $(document).ready(function(e) { $('a').click(function(){ $(this).addClass('disable'); var self = this; setTimeout(function(){ $(self).removeClass('disable'); }, 3000); }); }); 

 .disable {background-color:#F00} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">test</a> 

或者在ES6中，您可以使用粗箭頭功能，該功能不會更改變量范圍：

 $(document).ready(function(e) { $('a').click(function(){ $(this).addClass('disable'); setTimeout(()=>{ $(this).removeClass('disable'); }, 3000); }); }); 

 .disable {background-color:#F00} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">test</a>