Como definir tempo ou condição para nao executar alguma ação muitas vezes seguidas em javascript

Front-end JavaScript
,
#1

Tenho um botão que quando eu clico nele, ele troca seu proprio icone e mostra um menu (uma seta pra baixo para mostrar e troca por uma seta para cima para ocultar o menu), mas se eu ficar clicando rapidamente, ele alterna rapidamente entre os icones mas nao da tempo do menu aparece e sumir, aí as vezes quando o menu fica oculto a seta fica virada. Que codigo em javascript tenho que usar para resolver isso.

O botao:

<div class="col-md-12">
              <button class="btn navbar-inverse btn-hamburguer btn-xs center-block" type="button" data-toggle="collapse" href="#collapse1" {{action 'mudaBotao'}}>
                  <span class="glyphicon {{if botao 'glyphicon-triangle-bottom' 'glyphicon-triangle-top'}} glyphicon-align-center" id="botao-show"/>
              </button>
            </div>

O javascript que troca de true pra false, alternando a class do botao.

botao: true,

(Codigo Oculto...)

mudaBotao(){
      this.set('botao', !this.get('botao'));
    },
#2

Uma pergunta sobre seu código: O que você está usando para trabalhar com essa sintaxe: {{action 'mudaBotao'}}? (Curiosidade minha mesmo).

Sobre sua pergunta, no javascript, dá para trabalhar com setTimeout e com uma variável de controle para impedir vários cliques num curto período de tempo.

#3

Estou usando EmberJs.
Esse setTimeout nao da certo :frowning:

#4

Segue exemplo com a ideia que mencionei:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Some Clicks</title>
	
	<script>
		var impedirClique = false;
		
		function teste() {
			if(impedirClique) {
				return;
			}
			
			impedirClique = true;
			
			var btn = document.getElementById('btn');
			var content = document.getElementById('content');
			
			if(btn.innerHTML === 'click') {
				btn.innerHTML = 'clicked';
				
				setTimeout(function() {
					content.style.display = 'block';
					impedirClique = false;
				}, 1000);
			} else {
				btn.innerHTML = 'click';
				
				setTimeout(function() {
					content.style.display = 'none';
					impedirClique = false;
				}, 1000);
			}
		}
	</script>
</head>

<body>
	<button id="btn" type="button" onclick="teste()">click</button>
	<span style="display:none" id="content">Conteúdo</span>
</body>

</html>
1 curtida