3

Estou com um problema de quando clico no botão ele dispara a função a quantidade de vezes clicada. quando clico 3x seguidas ele dispara a mesma função 3x gerando lentidão. como faço para resolver, código:

 function callSearch(){
 $('#Search').one('click', function(e){
   doSearch()
   callSearch()
 })
}
<button id="Search">Search</button>

Minha intenção é após terminar doSearch, quero liberar o click poder realizar novamente uma nova pesquisa, mas que não seja feita mais do q um doSearch por vez.

5
  • Você pode bloquear seu botão após o clique e liberar ele somente após o término da execução da função Commented 4/12/2019 às 21:35
  • Não funcionou, teste: $('#Search').one('click', function(e){ $(this).disabled = true doSearch() callSearch() $(this).disabled = false }) Commented 4/12/2019 às 21:40
  • você pode setar ele como disabled quando ocorrer o primeiro clique e só liberar após o response do search
    – flourigh
    Commented 4/12/2019 às 22:03
  • @AlexsanderRogerio Não funcionou porque ? O que aconteceu ?
    – Isac
    Commented 5/12/2019 às 0:59
  • segue no fiddle jsfiddle.net/AlexRoPe/z61unf7m/5 quando eu clico ele executa multiplas vezes o codigo, no exemplo de eu clicar varias vezes rapido, e nao é bloqueado em nenhum momento Commented 5/12/2019 às 13:55

2 Respostas 2

2

Você pode usar o atributo disabled para verificar se o botão foi clicado ou não dentro do handler do evento. Algo mais ou menos assim:

$('#btn').on('click', function() {
  $(this).prop('disabled', true);
  
  console.log('Clicou!');
  
  setTimeout(() => {
    // Após realizar algumas ações, basta remover o atributo
    // `disabled`, para que ele possa ser clicado novamente.
    $(this).prop('disabled', false);
  }, 750);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn">Clique-me</button>

Como você pode perceber acima, o evento click não é sequer disparado se o botão estiver desabilitado.

1

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.

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 .