Hoffentlich ist dies eine schnelle und einfache Möglichkeit für jemanden herauszufinden. Ich bin ziemlich neu, um eine Menge von Javascript / jquery zu verwenden, und ich habe die folgende Einrichtung, um einen Kundennamen aus einer Datenbank zu ziehen und anzuzeigen, wie der Benutzer die Kundennummer eingegeben hat.
Alles funktioniert gut, aber es sucht bei jeder Taste . Ich weiß, dass ich es in blur ändern könnte, aber ich möchte, dass es so lange wie möglich nach einer Verzögerung sucht.
Hier ist der aktuelle Code:
%Vor%Wie Sie sehen, ist es für jede Taste bindend, was bedeutet, dass Sie, wenn Sie zu schnell suchen, ein falsches Ergebnis hinterlassen, da es noch geladen wird. (Wenn keine Übereinstimmungen gefunden werden, wird ein Fehler angezeigt, und wenn der Benutzer schnell genug eingegeben wird, muss der Benutzer die letzte Ziffer zurücksetzen und die letzte Zahl erneut eingeben)
Könnte jemand dazu beitragen, dem vorhandenen Code eine Verzögerung hinzuzufügen, und wenn möglich, eine kleine Erklärung, was die vorgenommene Änderung betrifft, dann kopiere und füge ich einfach nicht ohne zu verstehen.
---- BEARBEITEN ----
Dies ist der Code, mit dem ich fertig bin, danke Leute!
%Vor% Sie sollten sich die setTimeout und die clearTimeout Funktionen:
Was wir tun, ist, dass wir die Funktion postData nicht sofort auslösen, sondern sie an setTimeout übergeben, sodass sie nach einer bestimmten Zeit (in diesem Fall 300 Millisekunden) ausgelöst wird.
Die setTimeout -Funktion gibt eine Timer-ID zurück, die wir dann an clearTimeout übergeben können, um diesen Aufruf von jedem Lauf abzubrechen. Bevor wir einen neuen Timer einstellen, prüfen wir zunächst bei jedem Tastendruck, ob ein Timer eingestellt ist. Wenn dies der Fall ist, brechen wir den alten Timer ab, bevor wir einen neuen starten.
Um dies weiter zu verbessern, können Sie auch Abbrechen Ihres AJAX-Anrufs bei jedem Tastendruck, nur für den Fall, dass der Benutzer nach mehr als 300 Millisekunden etwas eingegeben hat (nachdem der Timer ausgelöst wurde, aber bevor die AJAX-Anfrage zurückkehrt).
PS Sie sollten sich Ben Almans Throttle / Debounce-Plugin anschauen , die hier perfekt funktionieren würden.
Sieh dir die Funktion debounce von Underscore an - es macht diese Art von Verhalten sehr einfach:
Auf diese Weise wird der Aufruf von postData nur ausgeführt, nachdem der Benutzer die Eingabe von für 500ms beendet hat (oder für was auch immer Sie die debounce wait festgelegt haben)
Außerdem schlich ich mich in das Ereignis input ein, um weitere Änderungen wie z Kopieren / Einfügen zusätzlich zu Tastenanschlägen (in modernen Browsern)
Ich würde die Suche ein wenig verzögern, aber Sie müssen auch die letzte Anfrage abbrechen, da Sie nicht vorhersagen können, welche Reihenfolge sie ausführen werden ( oder Sie können eine Warteschlange für den Ajax verwenden) ).
Ich werde alle drei Teile beschreiben:
Umbrechen Sie den postData-Callback in setTimeout . Speichern Sie den Rückgabewert von setTimeout als $("#id").data('timeout') und rufen Sie jedes Mal clearTimeout darauf auf, sodass das Ereignis nur einmal pro schneller Zeichenfolge ausgelöst wird.
Speichern Sie die letzte Anfrage auf $("#id").data('lastRequest') oder ähnliches. Jedes Mal, wenn postData aufgerufen wird, führen Sie $("#id").data('lastRequest').abort() aus. Speichern Sie den Rückgabewert von $.post() in diesem Datenfeld. Um einen Fehler zu vermeiden, initialisieren Sie Folgendes:
Es könnte einen besseren Weg geben, aber hier ist etwas von der Spitze meines Kopfes:
%Vor%Tags und Links javascript jquery delay