Wie füge ich einem jQuery .keyup()-Handler eine Tippverzögerung hinzu?

So implementieren Sie eine Eingabeverzögerung im .keyup()-Handler

Beim Arbeiten mit Suchfeldern, die jedes Mal Aktionen auslösen, wenn eine Taste gedrückt wird gedrückt wird, kann es von Vorteil sein, eine Verzögerung zu implementieren, um unnötige Abfragen zu reduzieren. In diesem Artikel wird untersucht, wie diese Verzögerung erreicht werden kann, um sicherzustellen, dass Abfragen erst nach einer Eingabepause ausgeführt werden.

Der .keyup()-Handler bietet keine inhärente Option zum Einführen einer Verzögerung. Allerdings kann eine benutzerdefinierte Funktion verwendet werden, um dieses Verhalten zu erreichen. Ein gängiger Ansatz ist die Verwendung der Funktion setTimeout().

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}

Diese Funktion benötigt zwei Parameter: Callback (die Funktion, die nach der Verzögerung ausgeführt werden soll) und ms (die Verzögerungsdauer in Millisekunden).

So verwenden Sie diese Funktion mit dem .keyup()-Handler:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

In diesem Beispiel das .keyup()-Ereignis des Felds „Eingabe“. löst die Verzögerungsfunktion aus, die nach jedem Tastendruck 500 Millisekunden wartet. Erst wenn der Benutzer eine halbe Sekunde lang mit der Eingabe aufhört, wird der Rückruf ausgeführt und der aktuelle Wert des Eingabefelds protokolliert.

Das obige ist der detaillierte Inhalt vonWie füge ich einem jQuery .keyup()-Handler eine Tippverzögerung hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!