disable button per second with jquery

Question

Good this by mounting a custom css button. I need to keep it locked for 2 seconds after the first click, but it is not working. When I click I change the text to an icon, and after 2 seconds the text has to go back and the button has to be released for the click.

Someone knows what I’m doing wrong?

$(document).ready(function () {
    $("button").click(function () {
        $(this).html("<i class='material-icons animate-spin'>autorenew</i>");
        
        // Desabilita o botao
        $(this).disabled = true;

        // Habilita novamente após dois segundos (2000) ms
        setTimeout(function () {
            toggleDisabled($(this));
        }, 2000);
        
        function toggleDisabled(elem) {
            elem.disabled = !elem.disabled;
        }
    });
});

.bt {
    transition: all .3s ease-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    border:0;
    padding:10px;
    width:200px;
    height: 50px; 
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    border-radius: 4px;
    background-color: #0091FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <!-- Material Icons (Google) -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<button class='bt' type='submit'>OK</button>

Answer 1

This happens because when the setTimeout is called, the $(this) is no longer the button you clicked, but the object Window.

To solve, simply put the $(this) in a variable. I made an example for you to see in Jsfiddle

var button = $(this);
button.html("<i class='material-icons animate-spin'>desabilitado</i>");

// Desabilita o botao
button.prop('disabled', true);

// Habilita novamente após dois segundos (2000) ms
setTimeout(function () {
    toggleDisabled(button);
}, 2000);

PS: I usually have problems with IE when using the disabled direct, so I prefer the .prop('disabled'). I took the liberty of switching at the Fiddle, but you can go back to yours normally

Answer 2

This inside the setTimeout is not the same as the external scope, I added a bind and changed the code a little to do what you said

$(document).ready(function () {
    $("button").click(function () {
        if(!$(this).disabled){
            var oldText = $(this).html();
            $(this).html("<i class='material-icons animate-spin'>autorenew</i>");
            // Desabilita o botao
            $(this).disabled = true;

            // Habilita novamente após dois segundos (2000) ms
            setTimeout(function () {
                $(this).disabled = false;
                $(this).html(oldText);
            }.bind(this), 2000);
        }
    });
});

.bt {
    transition: all .3s ease-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    border:0;
    padding:10px;
    width:200px;
    height: 50px; 
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    border-radius: 4px;
    background-color: #0091FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <!-- Material Icons (Google) -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<button class='bt' type='submit'>OK</button>

Answer 3

Puts the whole logic of locking the button on a separate function, so it’s easier to reuse.

Something like that:

$(document).ready(function() {
  function block(e) {
    var el = e.currentTarget;
    el.disabled = true;
    el.innerHTML = "<i class='material-icons animate-spin'>autorenew</i>";
    setTimeout(function() {
      el.disabled = false;
      el.innerHTML = 'OK';
    }, 2000);
  }
  $("button").click(block);
});

.bt {
  transition: all .3s ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  border: 0;
  padding: 10px;
  width: 200px;
  height: 50px;
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  border-radius: 4px;
  background-color: #0091FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Material Icons (Google) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<button class='bt' type='submit'>OK</button>