Nosso colega Luiz Felipe já apresentou uma solução para o problema, mas como estamos aqui pra compartilhar ideias então vamos lá!
O HTML 5 nos permite adicionar novos atributos customizáveis para qualquer elemento na página.
Podemos aproveitar dessa facilidade e adicionar um ou vários novos atributos ao botão com o intuito de ter informações extras sempre disponíveis.
Segue o Exemplo
$('.bBtn').on('click', function() {
if ($(this).attr('status') == 'ativo') {
$(this).attr('status','inativo');
console.log('Botão pode chamar a função necessária');
setTimeout(function(){ $('.bBtn').attr('status','ativo'); }, 1000);
} else {
console.log('Botão não pode chamar a função necessária');
}
});
.bBtn {
border: 1px solid #019234;
padding: 12px;
border-radius: 5px;
width: 150px;
text-align: center;
color: #019234;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='bBtn' status='ativo'>Faça Algo</div>
Neste exemplo mostro um comportamento bem semelhante a resposta do Luiz, pra mostrar que é possível resolver o problema de várias formas!!
experimente clicar diversas vezes no botão pra acompanhar o comportamento dele
com a função do jquery attr() é possível acessar e manipular qualquer atributo referente ao elemento selecionado, assim podemos mudar da forma que quisermos o novo atributo status
do botão.
No exemplo acima, resolvi utilizar uma condição que verifica se o atributo está ativo ou inativo, e dessa forma sei qual caminho deve ser seguido. Ressaltando que esse atributo, e a forma como ele é interpretado (ativo/inativo), é definido pelo programador, isso quer dizer que estamos livres para criar diversos comportamentos em um único elemento.
Você também não precisa controlar os atributos com funções de tempo como eu e o Luiz utilizamos no exemplo.
Em alguns casos não podemos determinar o tempo que uma função leva para ser finalizada, por exemplo, uma requisição assíncrona pode variar seu tempo de execução de cliente para cliente.
Dito isso, seria interessante manipular o atributo do elemento sempre que a função estiver sendo concluída ou em um callback. Assim teremos a certeza de que está tudo ok.
Obviamente não respondi isso tudo para mostrar o mesmo comportamento da resposta do Luiz (kkk)
Esse próximo exemplo vai mostrar como pode ser útil a manipulação de atributos
$('.bBtn').on('click', function() {
if ($(this).attr('status') == 'ativo') {
$(this).attr('status', 'inativo');
var quantidade = $(this).attr('quantidade');
quantidade++;
if (quantidade == 1) {
console.log('Botão foi clicado ' + quantidade + ' vez');
} else if (quantidade == 4) {
console.log('Botão foi clicado ' + quantidade + ' vezes');
$(this).css('padding', '43px');
} else if (quantidade == 6) {
console.log('Botão foi clicado ' + quantidade + ' vezes');
$(this).css('background-color', '#019234');
} else if (quantidade == 10) {
console.log('Contagem Resetada');
$(this).css('background-color', '#fff');
$(this).css('padding', '12px');
quantidade = 0;
} else {
console.log('Botão foi clicado ' + quantidade + ' vezes');
}
$(this).attr('quantidade', quantidade);
setTimeout(function() {
$('.bBtn').attr('status', 'ativo');
}, 1000);
} else {
console.log('Botão não pode chamar a função necessária');
}
});
.bBtn {
border: 1px solid #019234;
padding: 12px;
border-radius: 5px;
width: 150px;
text-align: center;
color: #019234;
cursor: pointer;
transition: 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='bBtn' status='ativo' quantidade='0'>Faça Algo</div>
Adicionei mais um atributo e usei um exemplo bem bobinho de estilização pra mostrar que manipular os elementos dessa forma pode nos dar uma liberdade bem bacana, e nos permite também ser mais dinâmicos na criação de páginas.
Lembre-se que todos os atributos são visíveis ao cliente, então apenas guarde informações em atributos que possam ser conhecidas por qualquer pessoa.