javascript: comment retarder l'envoi de données lorsque plusieurs cases à cocher sont cliquées dans un court intervalle de temps?

Question

J'ai un tableau de cases à cocher dans un formulaire dynamique-html complexe. Chaque fois qu'un utilisateur clique sur une case, une requête assez coûteuse est générée et soumise à un serveur distant. Je souhaite différer cette action de soumission en fonction de l'action suivante de l'utilisateur. Si l'utilisateur clique plusieurs cases à cocher rapidement, tous les premiers clics doivent être supprimés, seul le dernier est traité et éventuellement envoyé après 1 seconde environ. peut-être que c'est un problème commun, mais je n'ai jamais travaillé avec des délais d'attente avant.

Answer 1

La méthode que vous essayez d'employer s'appelle le débrayage.
J'ai souvent une fonction anti-rebond générique dans mon javascript:

var debounce=function(func, threshold, execAsap) { 
    var timeout; 
    return function debounced() { 
     var obj = this, args = arguments; 
     function delayed() { 
      if (!execAsap) 
       func.apply(obj, args); 
      timeout = null; 
     }; 
     if (timeout) 
      clearTimeout(timeout); 
     else if (execAsap) 
      func.apply(obj, args); 
     timeout = setTimeout(delayed, threshold || 100); 
    }; 
}; 

Et puis quand quelque chose a besoin debouncing, je DEBOUNCE habituellement la fonction,
Dans votre cas, il est peut-être quelque chose comme:

$("checkbox").click(debounce(callBackFunction,1000)); 

où callbackFunction est la fonction qui fait votre "jquery cher" et 1000 est le délai d'expiration. L'application de ce qui précède signifie que callbackFunction est appelée à 1 seconde de temporisation, si elle est appelée à des intervalles plus courts, l'appel est ignoré.