Die debounce()-Funktion in JavaScript

In diesem Artikel erfahren Sie, wie Sie die JavaScript-Funktion debounce() verwenden, um die Leistung Ihrer Anwendungen zu verbessern.

Den Begriff Debounce in JavaScript verstehen

JavaScript verwendet die Entprelltechnik, um die Browserleistung zu beschleunigen. Eine Entprellung ist ein Verwandter einer Drossel, und beide verbessern die Leistung der Online-Anwendung.

Dennoch werden sie in vielen Zusammenhängen beobachtet. Eine Entprellung wird verwendet, wenn wir nur den Endzustand betrachten.

Beispielsweise verzögern sie das Abrufen von Suchergebnissen mit Textvervollständigung, bis der Benutzer mit der Eingabe fertig ist. Das ideale Werkzeug ist eine Drosselklappe, wenn wir die Geschwindigkeit aller Zwischenzustände steuern wollen.

Verwenden Sie die debounce()-Funktion in JavaScript

Hier ist eine Code-Illustration, die Ihnen hilft zu verstehen, wie man eine Funktion entprellt:

function debounce(jss, timeout = 3000) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      jss.apply(this, args);
    }, timeout);
  };
}

function userInput() {
  console.log('Changing data');
}

const workonChange = debounce(() => userInput());

Code ausführen

Also, was ist hier los? debounce() ist eine einzigartige Funktion, die zwei Funktionen ausführt:

• Der Timer-Variablen einen Gültigkeitsbereich zuweisen
• Richten Sie Ihre Funktion so ein, dass sie zu einer bestimmten Zeit ausgeführt wird

Schauen wir uns den ersten Anwendungsfall mit Texteingabe an, um zu sehen, wie das funktioniert.

Die Funktion debounce() setzt mit clearTimeout zunächst den Timer zurück, wenn ein Besucher den ersten Buchstaben schreibt und die Taste loslässt (Timer). Der Schritt ist derzeit nicht erforderlich, da nichts geplant ist.

Die Funktion userInput() wird voraussichtlich in 3000 Millisekunden (3 Sekunden) aufgerufen. Wenn der Besucher jedoch weiter tippt, löst jede notwendige Freigabe die Funktion debounce() erneut aus.

Jeder Aufruf muss den Timer zurücksetzen, oder mit anderen Worten, alle früheren userInput()-Vorbereitungen abbrechen und auf einen neuen Zeitpunkt verschieben – 3000 Millisekunden in der Zukunft. Dies wird fortgesetzt, solange der Besucher die Tastenanschläge innerhalb von 3000 Millisekunden beibehält.

Da der vorherige Zeitplan nicht gelöscht wird, wird userInput() aufgerufen.

Ausgabe:

Sie werden sehen, dass die Methode setTimeout immer wieder verzögert, wenn Sie s, h, i oder v eingeben (trotz der aufgerufenen Funktion userInput). Wenn wir beim Tippen drei Sekunden innehalten, wird die primäre Funktion gedruckt: Daten ändern.

Die Entprellung verbessert die Anwendungsgeschwindigkeit, indem Funktionen nur nach einer festgelegten Pausenzeit aufgerufen werden und nicht bei jeder Operation. Sie müssen dies jedoch nicht selbst durchführen.

In Lodash steht beispielsweise eine debounce-Funktion zur Verfügung. Mitwirkende haben Bibliotheken wie Lodash verbessert, um die debounce-Funktion zu verbessern.

Wir haben in diesem Artikel besprochen, was Entprellen ist, warum es nützlich ist und wie man es in JavaScript macht.