Prévention d'un doublon d'événements ajax dans jquery

Question

Quel est un bon moyen de bloquer jusqu'à ce qu'un événement ajax précédent soit terminé?

J'ai suivi How can you make a vote-up-down button like in Stackoverflow? mais si je clique assez rapidement sur le bouton, cela enverra plusieurs événements (et peut-être incohérents) au serveur. Comment puis-je faire en sorte que l'utilisateur attende avant qu'un autre clic puisse être enregistré?

Editer: Je ne veux pas non plus le bloquer globalement - juste pour ce bouton/article. Dois-je maintenir un hachage?

Answer 1

Eh bien, puisque je l'ai écrit que je suppose que je pourrais aussi bien répondre à cela aussi;)

Le « commun La façon de procéder est d'avoir une variable indicatrice que la requête est en cours et de la mettre à jour en conséquence avant/après que tout se passe. Pour mon code à cette question, vous le modifier comme suit:

En dehors de la fonction clic, ajoutez ceci:

var voting = false; // not initially voting 

Dans la fonction de clic, au sommet, ajoutez ceci:

if(voting) return false; // if voting, return 
voting = true; // if not, set voting to true 

A l'intérieur des deux callbacks post, ajoutez ceci:

voting = false; // done voting, set back to false 

Si vous voulez maintenir un dans dicator sur une base par questions/réponses/article, vous pouvez le faire:

D'abord, remplacer ce code:

var id = $(this).parents('div.answer').attr('id').split('_')[1]; 

Avec ceci:

var parent = $(this).parents('div.answer'); // get the parent div 
if(parent.data('voting')) return false; // if voting, return 
parent.data('voting', true); // if not, update the marker 
var id = parent.attr('id').split('_')[1]; // get the id 

Puis dans les deux callbacks de poste, ajouter ceci:

parent.data('voting', false); // done voting, set back to false 

Dans ce cas, nous utiliserions jQuery de data pour enregistrer le vote s tatus d'une question/réponse/d'un item particulier à l'intérieur de la DIV contenant et mise à jour en conséquence chaque fois qu'il se passe quelque chose.

Espérons que cela aide.

Answer 2

Utilisez les événements AJAX de début et de fin pour définir un var global indiquant occupé jusqu'à ce que la demande soit terminée. Affiche un message indiquant que l'action est en cours d'exécution pour informer l'utilisateur.

Jquery a une charge de fonctions pour vous aider si cela convient à votre application:

http://docs.jquery.com/Ajax

Answer 3

Bind l'événement une fois à l'aide jQuery.fn.one puis le lier à nouveau dans la fonction de rappel

myFunc = function() { 
    $.post(url, data, function(data){ 
     $('#button').one('click', myFunc) 
    } 
}; 

$('#button').one('click', myFunc);