Javascript - Quel événement utiliser pour un changement multisélection?

Question

J'utilise YUI comme framework javascript et je peux réagir avec succès lorsque l'utilisateur modifie la valeur des champs de base, la réaction étant l'envoi d'une requête Ajax.

Cependant, je ne suis pas aussi chanceux avec les listes déroulantes multisélection:

• écoute de " changer " enverrait ma requête chaque fois que l'utilisateur ajoute / supprime un élément à sa sélection
• écoute de "flou" oblige l'utilisateur à cliquer ailleurs afin de perdre le focus et d'envoyer la requête (peu utilisable). De plus, il l'enverrait si l'utilisateur ne fait que faire défiler la liste sans rien changer (inutile, déroutant).

Une idée (avec YUI), qui utiliserait un comportement intelligent? Ou devrais-je vraiment écouter les changements et implémenter un délai d’attente (attendre les modifications suivantes avant d’envoyer une requête)?

Answer 1

J'utilise le même type de délai d'expiration que vous souhaitez pour les événements clés. Pour détecter lorsque l'utilisateur a fini de taper, la même approche peut être utilisée pour votre problème:

// helper function
var timeout = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Utilisation:

// YUI 2
YAHOO.util.Event.addListener(oElement, "change", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}); 

// YUI 3
Y.on("click", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}, oElement);

En gros, dans cette fonction timeout , je réinitialise le chronomètre si la fonction est appelée avant le délai spécifié.

Answer 2

vous pouvez exécuter un setTimeout après l'événement onChange et suivre un certain nombre de modifications pour déterminer si une modification a été apportée ou non depuis le déclenchement de l'événement. si aucune modification n'a été apportée dans ce délai, la requête peut être envoyée.

Par exemple, quelque chose comme:

var changes = 0;

function myOnChangeHandler(e)
{
  changes++;
  var local_change = changes;

  setTimeout(function() { 
    if (local_change === changes) {
      sendRequest();
    }
  }, 500);
}