Bloqueando Duplo Click e Acrescentado Delay para executar outra vez

[Luciano Zanita 0]

Olá pessoas, estou com um problema em um código jquery, uso ele para submit de um formulário a uma página aonde executa mysql e algumas outras funções, pois bem, o problema que estou tendo é que ele esta enviando não somente uma vez mais sim várias, fazendo um loop muito estranho, e queria saber como posso acrescentar ao código um pequeno delay para que possa novamente clicar no botão, e que só vá apenas uma requisição para esta página, evitando o duplo click.

 

Código Jquery

<script type="text/javascript">
$(document).on('submit', '#formplaylist', function()
 {  
  $.post('funcao/criar.php', $(this).serialize(), function(data)
  {
   $(".resultadodeletarplaylist").html(data);   
  });
  
  return false;
  
 });
</script>

Código do formulário

<form id="formplaylist">
		      
		      <input type="text" name="nomeplaylist" placeholder="Nome da Playlist" class="form-control"/>
		      <br/>
           <button id="load" data-loading-text="Aguarde..." name="button" type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Criar</button>
		      </form>

Alguem sabe como posso resolver isto?

[Luciano Zanita 0]

UP?

[Lucas M. Martins 5]

Tenta algo assim

var delayTimeout = 2000;
var booleanPost = true;

$("#formplaylist").submit(function(event){
	if(booleanPost){
	
		booleanPost = false;
		
		setTimeout(function(){
			booleanPost = true;
		}, delayTimeout);
		
		$.post("funcao/criar.php", $(this).serialize(), function(data){
			$(".resultadodeletarplaylist").html(data);   
		});
	}
	event.preventDefault();
	return false;
});

[Luciano Zanita 0]

 

Tenta algo assim

var delayTimeout = 2000;
var booleanPost = true;

$("#formplaylist").submit(function(event){
	if(booleanPost){
	
		booleanPost = false;
		
		setTimeout(function(){
			booleanPost = true;
		}, delayTimeout);
		
		$.post("funcao/criar.php", $(this).serialize(), function(data){
			$(".resultadodeletarplaylist").html(data);   
		});
	}
	event.preventDefault();
	return false;
});

Fiz o teste, infelizmente ainda ta enviando várias solicitações em uma só, que acaba registrando vários de uma vez só.

[kikombat 16]

Uma solução seria você usar assim

$(document).one('submit', '#formplaylist', function(e){ 
  e.preventDefault(); 
  $.post('funcao/criar.php', $(this).serialize(), function(data){
   $(".resultadodeletarplaylist").html(data);   
  });          
});

Note que foi usado "$(document).one('submit',..." no lugar de "$(document).on('submit',...".