1

Bom esto montando um botão personalizado com css. Preciso manter ele bloqueado por 2 segundos após o primeiro clique, porém não esta funcionado. Ao clicar eu mudo o texto para um ícone, e depois de 2 segundos o texto tem que voltar e o botão tem que ser liberado para o clique.

Alguém sabe o que estou fazendo errado?

$(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>

3 Respostas 3

3

Isso acontece porque quando o setTimeout é chamado, o $(this) já não é mais o botão que você clicou, e sim o objeto Window.

Para resolver, simplesmente coloque o $(this) em uma variável. Fiz um exemplo pra você ver no 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: eu costumo ter problemas com o IE quando uso o disabled direto, então prefiro o .prop('disabled'). Tomei a liberdade de trocar no Fiddle, mas você pode voltar para o seu normalmente

2
  • Exatamente isso. Você está com o contexto errado do this. 28/03/2017 às 17:09
  • Juntei sua ideia com a do Antonio e deu certo, obrigado 28/03/2017 às 17:33
2

O this dentro do setTimeout não é o mesmo do escopo externo, adicionei um bind e mudei um pouco o código para fazer o que você disse

$(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>

9
  • Ok, entendi. Porém tem uma questão, nem sempre o texto do botão vai ser ok, tem alguma forma do jquery salvar o texto antigo e colocar ele de volta? 28/03/2017 às 17:20
  • Sem problemas, alterei para salvar o texto anterior e voltar no setTimeout :)
    – Antonio
    28/03/2017 às 17:23
  • ok, a questão do texto esta ok. só tem 1 problema, o botão não esta ficando desabilitado. confere o código aqui jsfiddle.net/t5wmdkwp/1 28/03/2017 às 17:30
  • já resolvi com o uso do $(this).prop('disabled', true); 28/03/2017 às 17:32
  • resultado final jsfiddle.net/t5wmdkwp/2 28/03/2017 às 17:33
2

Coloca a lógica toda de bloquear o botão numa função à parte, assim fica mais fácil de reutilizar.

Algo assim:

$(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .