觸發后禁用對功能的調用5秒鍾

Question

我有一個按鈕，當有一個“活動”功能時，我想禁用它不再向jquery發送調用。

發生的情況是，每次用戶單擊按鈕時，計數器都會減少1。

• 點擊按鈕
• 按鈕被禁用
• 5秒后，計數器減一，並將按鈕更改為啟用。

但是，現在的問題是，即使應該禁用該按鈕，用戶也可以單擊X次，而在5秒鍾后，計數器就會減少X倍。

表示呼叫仍在進行。

請參閱此處，到目前為止我一直在嘗試做的事情，但不幸的是沒有成功。

$( document ).ready(function() {

    var enabled=true;

    $(".myButton").click(function(){

        if(enabled = true) {

        setTimeout(function(){
            var i = document.getElementById('counter2');
            i.innerHTML = parseInt(i.innerHTML)-1;
            $('.progress-bar').css("width", '+=' + '35px');
            $(".myButton").attr('disabled','enabled');
            $('.myButton').css('opacity', '1');
            var enabled=true;
        },5000)
        $(".myButton").attr('disabled','disabled');
        $('.myButton').css('opacity', '0.5');
        var enabled=false;

        } else { }

    });
});

Answer 1

if(enabled = true) {
           ^

您打算在此處寫== 。 甚至更好： if (enabled)的enabled是一個布爾反正。

這里也使用= true進行賦值。 正如true是真理一樣，條件將永遠評估為true 。

Answer 2

我認為您不需要跟蹤變量來監視按鈕的狀態，因為您已經設置了一個屬性以指示該按鈕已被禁用。 因此，您可以僅使用該屬性作為狀態的指示符。

另外，您正在對myButton類的所有按鈕執行此操作。 因此，我將處理程序隔離為僅單擊了event.target的按鈕。

$(".myButton")
    .prop('disabled',false)
    .click(function(event){
       // get the button that was clicked.
       var btn = $(event.target);
       if(btn.prop('disabled') === true) {
             // it's already disabled, nothing to do
             return;
       }

       // start a 5 second timer
       setTimeout(function(){
           var i = document.getElementById('counter2');
           i.innerHTML = parseInt(i.innerHTML)-1;
           //$('.progress-bar').css("width", '+=' + '35px');
           // I've never seen += used like this ^^^ does it work?
           var bar = $('.progress-bar');
           bar.css("width", (bar.width() + 35) + 'px');

           // after 5 seconds enable the button
           btn.prop('disabled',false);
           btn.css('opacity', '1');
        },5000);

        // disable the button until timer expires.
        btn.prop('disabled',true);
        btn.css('opacity', '0.5');
    });