Javascript: quale evento utilizzare per la modifica multi-selezione

Question

Sto usando YUI come framework javascript e posso reagire con successo quando l'utente cambia il valore dei campi di input di base, essendo la reazione inviata una query Ajax.

Tuttavia, non sono così fortunato con gli elenchi a discesa multi-selezione:

• ascoltando " cambia " invierebbe la mia query ogni volta che l'utente aggiunge / rimuove un elemento dalla sua selezione
• ascoltando " sfocatura " richiede all'utente di fare clic altrove per perdere lo stato attivo e inviare la query (non molto utilizzabile), inoltre invierebbe la query se l'utente scorre solo l'elenco senza cambiare nulla (inutile, confuso).

Qualche idea (con YUI) che avrebbe usato un comportamento intelligente? O dovrei davvero ascoltare le modifiche e implementare un timeout (per attendere le modifiche successive prima di inviare una query)?

Answer 1

Uso lo stesso tipo di timeout desiderato per gli eventi chiave, per rilevare quando l'utente ha terminato di digitare, lo stesso approccio può essere utilizzato sul tuo problema:

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

Utilizzo:

// 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);

Fondamentalmente in questa funzione timeout , resetto il timer se la funzione viene chiamata prima del ritardo specificato.

Answer 2

potresti eseguire un setTimeout dopo l'evento onChange e tenere traccia di una serie di modifiche per determinare se una modifica è stata apportata o meno da quando l'evento è stato attivato. se entro tale termine non sono state apportate modifiche, è possibile inviare la query.

ad es. qualcosa del tipo:

var changes = 0;

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

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