disable button per second with jquery

Navigation
1

Well I'm putting together a custom button with css. I need to keep it locked for 2 seconds after the first click, but it is not working. When clicking 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.

Does anyone know 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><!--MaterialIcons(Google)--><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<button class='bt' type='submit'>OK</button>
    
asked by anonymous 28.03.2017 / 18:58

3 answers

2

This within the setTimeout is not the same as the external scope, I've added a bind and changed the code a bit 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><!--MaterialIcons(Google)--><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<button class='bt' type='submit'>OK</button>
    
28.03.2017 / 19:09
3

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

To solve, simply put $(this) into a variable. I set 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 I use disabled direct, so I prefer .prop('disabled') . I took the liberty of trading in Fiddle, but you can go back to your normal

    
28.03.2017 / 19:08
2

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

Something like this: 

$(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><!--MaterialIcons(Google)--><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<button class='bt' type='submit'>OK</button>
    
28.03.2017 / 19:21
How to choose the first form to be displayed? Define multiple "ids" in an HTML tag [duplicate]