Javascript - Quel événement utiliser pour le changement multi-sélection

Question

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

Cependant, je ne suis pas chanceux avec des listes déroulantes MultiSelect:

• écouter « changement » enverrait ma requête à chaque fois que l'utilisateur ajoute/supprime un élément à sa sélection
• écouter " flou "oblige l'utilisateur à cliquer ailleurs pour perdre le focus et envoyer la requête (pas très utilisable), plus il enverra la requête si l'utilisateur ne fait que défiler sur la liste sans rien changer (inutile, déroutant).

Une idée (avec YUI), qui utiliserait un comportement intelligent? Ou devrais-je vraiment écouter pour modifier et implémenter un timeout (attendre les changements suivants avant d'envoyer une requête)?

Answer 1

J'utilise le même genre de délai d'attente que vous voulez sur les événements clés, pour détecter lorsque l'utilisateur a fini de taper, la même approche peut être utilisée sur 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, I r Définissez le temporisateur 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é effectuée depuis le déclenchement de l'événement. Si aucune modification n'a été effectuée pendant cette période, 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); 
}