Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

[BUG PROJETO] Botão Reiniciar - cliques sucessivos

No outro projeto, antes de usar o materialize, o botao de reiniciar era um button. E com ele conseguíamos sanar o bug de cliques sucessivos no botão reiniciar.

Com Materialize ele virou um link ( <a> ). Então, a única coisa que eu acho que ficou 'bugado' seria isto.

Abraço

7 respostas

Oi Leonardo, tudo bom?

Obrigado por compartilhar =)

Você também pode sugerir uma melhoria para esse ponto aqui.

Abraço!

Pra resolver esse "bug" basta usar a classe disabled do materialize. Esta classe já torna o botão "não clicável" e com uma cor cinza explicitando isso. Então, no final do AJAX, basta remover a classe.

Fiz um exemplo (com setTimeout): https://codepen.io/anon/pen/veqrgr

solução!

Valeu a ajuda Magnum.

Ja começo com a classe no botão. Afinal, não há porque clicar nele. Somente colocar a classe nele não resolve.

Depois declararei uma variável global para a função reinicializarJogo so funcionar de acordo com ela.

Somente colocar a classe nele não resolve mas, agradeço sua ajuda pois ajudará visualmente.

Mais uma vez. Muito obrigado.

------------------------------------ EDIT ------------------------------------

  • declarei uma variavel global chamada 'jogoReiniciado' para informar se o jogo ja havia sido reiniciado ou não (inicializada como true);
  • coloquei a classe 'disabled' no botao;
  • fiz um if na função reiniciaJogo afim de so ser executada caso a variável fosse false. Seto a variável jogoReiniciado como true e adiciono a classe disabled.
  • na função finalizaJogo seto a variável 'jogoReiniciado' como false e removo a classe 'disabled' do botao.;

Não lembro se algo mais ou menos isso. Mas está 'funfando' sem esse bug agora. Bom mesmo seria fazer um função para desabilitar/Habilitar botões, pois os outros continuam com suas funções ativas durante a digitação. Mas, de posse dessa logica acima, dá pra implementar fácil.

Boa magnum!

Sua duvida foi solucionada Leonardo? Marca a resposta que te ajudou como solução, assim a galera que passar pelo mesmo problema vai encontrar a solução mais rapido =)

Abraço!

André, a ajuda de Magnum foi mais no sentido visual (não menos válida - super importante para o usuário). Ainda era possível clicar no link (com cara de botão). Reeditei meu post com o que fiz (não lembro de deixei algo de fora, mas acho que está tudo lá).

Abraço

Desculpa Leonardo, acho que talvez eu não tenha entendido sua resposta corretamente. Mas a classe disabled não é só visual não, ela realmente desabilita o botão para receber cliques, deveria ser o suficiente para sua necessidade. Veja o link que disponibilizei. Boa sorte...

Sim Magnun, no link que você disponibilizou funcionou otimamente. Mas no projeto do curso, ele ainda "ouvia" os cliques. Assim, setei uma variável para auxiliar no teste da função "reinciarJogo".

Inicialmente, só coloquei a classe mas, mesmo visualmente desabilitado, ele fazia a ação da função.

Penso eu que a classe é CSS e só muda visualmente o <a>. Ele ainda continua a ser o mesmo elemento e o JS atrela à ele a função. Assim, fiz a função testar se pode ser executada ou não.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software