Javascript - Welches Ereignis für Mehrfachauswahl ändern verwenden

Question

ich YUI als JavaScript-Framework bin mit und kann erfolgreich reagieren, wenn der Benutzer den Wert von Grundeingabefeldern ändert, die Reaktion auf sein schickte eine Ajax-Abfrage.

Allerdings bin ich mir nicht so viel Glück mit Multiselect-Drop-Down-Listen:

• hören „change“ der Benutzer hinzufügt / entfernt ein Element in seine Auswahl
meine Abfrage jedes Mal schicken würde,
• hören „verwischen“ muss den Benutzer an anderer Stelle klicken, um den Fokus und senden Sie die Abfrage (nicht sehr brauchbar) zu verlieren, und es wäre ohne etwas zu ändern (nutzlos, die Abfrage, ob der Benutzer nur Rollen auf der Liste schicken verwirrend).

Jede Idee (mit YUI), dass ein kluges Verhalten verwenden würde? Oder soll ich höre wirklich ein Timeout zu ändern und zu implementieren (für spätere Änderungen warten, bevor eine Abfrage gesendet wird)?

Answer 1

Ich benutze die gleiche Art von Timeout Sie auf Schlüsselereignisse wollen, zu erkennen, wenn der Benutzer die Eingabe beendet haben, kann der gleiche Ansatz auf Ihr Problem verwendet werden:

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

Verbrauch:

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

Im Grunde genommen in dieser timeout Funktion, setzte ich den Timer, wenn die Funktion aufgerufen wird vor die angegebene Verzögerung.

Answer 2

Sie könnten eine setTimeout nach dem onChange Ereignisse laufen und dem Überblick über eine Reihe von Änderungen halten, um zu bestimmen, ob eine Änderung, da das Ereignis ausgelöst wurde gemacht worden ist. wenn keine Änderungen innerhalb dieser Zeit gemacht wurden, dann könnte die Abfrage gesendet werden.

z, so etwas wie:.

var changes = 0;

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

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