Drosselung und Entprellung in JavaScript: Ein Leitfaden für Anfänger

Bei der Verwendung von JavaScript können übermäßige Ereignisauslöser Ihre Anwendung verlangsamen. Wenn ein Benutzer beispielsweise die Größe des Browserfensters ändert oder etwas in eine Suchleiste eingibt, kann dies dazu führen, dass Ereignisse in kurzer Zeit wiederholt ausgelöst werden, was sich auf die App-Leistung auswirkt.

Hier kommen Drosselung und Entprellung zum Einsatz. Sie helfen Ihnen dabei, zu verwalten, wie oft Ihre Funktionen aufgerufen werden, wenn es um Ereignisse geht, die zu oft ausgelöst werden.

? Was ist Drosselung?

Drosselung begrenzt, wie oft eine Funktion ausgeführt werden kann. Selbst wenn ein Ereignis wiederholt auftritt, wird eine gedrosselte Funktion höchstens einmal in jedem angegebenen Zeitintervall ausgeführt.

Beispiel:

Stellen Sie sich vor, Sie sind auf einem Konzert und machen Fotos. Aber Sie beschließen, nur alle 5 Minuten ein Foto zu machen (egal wie aufregend die Aufführung wird). Das ist wie eine Drosselung. Egal wie viele fotowürdige Momente passieren, Sie bleiben bei Ihrer Regel, alle 5 Minuten ein Foto zu machen.

In JavaScript könnte dies angewendet werden, wenn Sie verfolgen möchten, wie oft der Benutzer auf einer Seite nach unten scrollt, Sie aber nicht möchten, dass die Funktion jede Millisekunde ausgelöst wird. Mit der Drosselung steuern Sie, wie oft diese Funktion ausgeführt wird.

Codebeispiel:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

In diesem Beispiel wird die handleScroll-Funktion nur einmal alle 2 Sekunden (2000 Millisekunden) ausgeführt, unabhängig davon, wie schnell oder häufig der Benutzer scrollt.

? Was ist Entprellen?

Entprellen stellt sicher, dass eine Funktion erst nach einer bestimmten Zeit der Inaktivität aufgerufen wird. Wenn das Ereignis weiterhin ausgelöst wird, setzt die Funktion den Timer immer wieder zurück und wird erst ausgelöst, wenn das Ereignis endet.

Beispiel:

Stellen Sie sich vor, Sie sind in einem Gruppenchat und geben eine Nachricht ein. Sie möchten Ihren Freunden nicht jedes Mal eine Benachrichtigung senden, wenn Sie eine Taste drücken. Stattdessen möchten Sie warten, bis Sie einige Sekunden mit dem Tippen aufgehört haben, bevor Sie eine „Tippen…“-Benachrichtigung senden. Das ist Entprellen – das Senden einer Benachrichtigung erfolgt erst nach einer Tipppause.

In JavaScript wird die Entprellung häufig verwendet, wenn Benutzer etwas in ein Suchfeld eingeben. Anstatt nach jedem Tastendruck eine Suchanfrage zu senden, können Sie mit der Suche warten, bis der Benutzer einen Moment mit der Eingabe aufhört.

Codebeispiel:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

In diesem Beispiel wird die handleInput-Funktion erst ausgeführt, nachdem der Benutzer 500 Millisekunden lang mit der Eingabe aufgehört hat.

? Wann sollte Drosselung oder Entprellung verwendet werden?

⚡️ Verwenden Sie Throttling, wenn Sie steuern möchten, wie oft eine Funktion im Laufe der Zeit aufgerufen wird. Gut für Veranstaltungen wie:

=> Scrollen
=> Größe des Fensters ändern
=> Mausbewegungen

⚡️ Verwenden Sie Debounce, wenn Sie sicherstellen möchten, dass eine Funktion erst aufgerufen wird, nachdem die Auslösung eines Ereignisses abgeschlossen ist. Gut für Veranstaltungen wie:

=> Eingabe in eine Suchleiste
=> Formulareinreichungen
=> Ändern der Fenstergröße (für Aktionen wie Layoutanpassungen)

Fazit ✅

Drosselung und Entprellung sind großartige Techniken zur Verbesserung der Leistung und Reaktionsfähigkeit Ihrer JavaScript-Anwendungen.

Sie helfen Ihnen bei der Verwaltung, wie oft Funktionen ausgeführt werden, und verhindern so, dass Ihre App durch zu viele Ereignisse überlastet wird.

Wenn Sie verstehen, wann und wie Sie sie verwenden, können Sie dafür sorgen, dass Ihr Code selbst in den am stärksten ausgelasteten Apps reibungslos läuft!

Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonDrosselung und Entprellung in JavaScript: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!