Entprellen vs. Drosseln in JavaScript: Funktionsaufrufe für bessere Leistung optimieren

Entprellen und Drosseln in JavaScript verstehen

Entprellen und Drosseln sind zwei wichtige Techniken, die in JavaScript verwendet werden, um die Geschwindigkeit zu steuern, mit der Funktionen ausgeführt werden. Diese Techniken werden häufig zur Leistungsoptimierung eingesetzt, insbesondere in Szenarien wie der Verarbeitung von Benutzereingaben, Scroll-Ereignissen und Größenänderungsereignissen. Beide dienen dazu, die Häufigkeit von Funktionsaufrufen zu begrenzen, funktionieren jedoch auf unterschiedliche Weise.

1. Entprellen

Entprellen sorgt dafür, dass eine Funktion erst aufgerufen wird, wenn seit dem letzten Ereignis eine bestimmte Zeit vergangen ist. Mit anderen Worten: Es verzögert die Ausführung der Funktion, bis der Benutzer eine Aktion ausgeführt hat, beispielsweise die Eingabe in ein Textfeld oder die Größenänderung eines Fensters. Dies ist besonders nützlich für Szenarien, in denen Sie verhindern möchten, dass eine Funktion zu häufig aufgerufen wird, beispielsweise wenn der Benutzer etwas in eine Suchleiste eingibt.

So funktioniert das Entprellen:

• Wenn das Ereignis ausgelöst wird, wird der Funktionsaufruf um eine bestimmte Zeitspanne verzögert.
• Wenn das Ereignis erneut ausgelöst wird, bevor die Verzögerungszeit abgelaufen ist, wird der vorherige Funktionsaufruf abgebrochen und der Verzögerungstimer zurückgesetzt.
• Die Funktion wird erst ausgeführt, wenn die Verzögerungszeit ohne weitere Ereignisse abgelaufen ist.

Beispiel für Entprellen:

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

In diesem Beispiel:

• debouncedSearch ruft searchQuery erst auf, nachdem 500 Millisekunden ohne weiteren Aufruf vergangen sind.
• Dadurch wird verhindert, dass die Suchfunktion jedes Mal aufgerufen wird, wenn ein Zeichen eingegeben wird.

Anwendungsfälle für die Entprellung:

• Sucheingabe: Bei der Implementierung von Echtzeit-Suchvorschlägen.
• Fenstergrößenänderung: Um zu vermeiden, dass bei jedem Größenänderungsereignis eine Neuberechnung des Layouts ausgelöst wird.
• Scroll-Ereignisse: Um das Auslösen einer Funktion während des kontinuierlichen Scrollens zu verhindern, insbesondere in Szenarios mit unendlichem Scrollen.

2. Drosselung

Drosselung stellt sicher, dass eine Funktion höchstens einmal in jedem angegebenen Intervall aufgerufen wird, unabhängig davon, wie oft das Ereignis ausgelöst wird. Dies ist nützlich, wenn Sie die Häufigkeit von Funktionsaufrufen begrenzen möchten, z. B. die Anzahl der Male, die ein Benutzer innerhalb eines bestimmten Zeitraums scrollen oder die Größe des Fensters ändern kann.

So funktioniert die Drosselung:

• Die Funktion wird sofort beim ersten Auslösen des Ereignisses ausgeführt.
• Danach wird es höchstens einmal alle n Millisekunden ausgeführt, auch wenn das Ereignis häufiger ausgelöst wird.

Beispiel für Drosselung:

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

In diesem Beispiel:

• ThrottledScroll stellt sicher, dass logScrollEvent höchstens einmal pro Sekunde aufgerufen wird, unabhängig davon, wie viele Scroll-Ereignisse in dieser Zeit ausgelöst werden.
• Die Funktion wird beim ersten Mal sofort ausgeführt und nachfolgende Aufrufe werden verzögert, um das Intervall einzuhalten.

Anwendungsfälle für die Drosselung:

• Scroll-Ereignisse: Um zu begrenzen, wie oft eine Funktion während des Scrollens aufgerufen wird (z. B. verzögertes Laden von Bildern).
• Größenänderungsereignisse: Um die Häufigkeit zu optimieren, mit der eine Fenstergrößenänderungsfunktion aufgerufen wird.
• Mausbewegungen: Um eine kontinuierliche Ausführung bei schnellen Mausbewegungen zu verhindern.

3. Entprellen vs. Drosseln: Hauptunterschiede

Funktion

Feature	Debouncing	Throttling
Function Execution	Executes after a delay when events stop	Executes at a fixed interval, no matter how many events occur
Use Case	Ideal for events that occur frequently but should trigger once after some idle time (e.g., input fields, search bars)	Ideal for events that fire continuously (e.g., scroll, resize) but should be limited to a fixed interval
Example Scenario	Search bar input where suggestions are updated only after the user stops typing for a certain period	Scroll events where a function should only run once every few seconds, even if the user scrolls frequently
Execution Frequency	Executes only once after the event stops firing	Executes periodically, based on the interval set
Effectiveness	Prevents unnecessary executions during rapid event firing	Controls the frequency of function executions, even during continuous events

Entprellen Drosselung Funktionsausführung Wird nach einer Verzögerung ausgeführt, wenn Ereignisse gestoppt werden Wird in einem festen Intervall ausgeführt, unabhängig davon, wie viele Ereignisse auftreten Anwendungsfall Ideal für Ereignisse, die häufig auftreten, aber nach einer gewissen Leerlaufzeit einmal ausgelöst werden sollen (z. B. Eingabefelder, Suchleisten) Ideal für Ereignisse, die kontinuierlich ausgelöst werden (z. B. Scrollen, Größenänderung), aber auf ein festes Intervall begrenzt sein sollten Beispielszenario Suchleisteneingabe, bei der Vorschläge erst aktualisiert werden, nachdem der Benutzer eine bestimmte Zeit lang mit der Eingabe aufgehört hat Scroll-Ereignisse, bei denen eine Funktion nur einmal alle paar Sekunden ausgeführt werden sollte, auch wenn der Benutzer häufig scrollt Ausführungshäufigkeit Wird nur einmal ausgeführt, nachdem das Ereignis nicht mehr ausgelöst wird Wird regelmäßig basierend auf dem festgelegten Intervall ausgeführt Wirksamkeit Verhindert unnötige Ausführungen während der schnellen Ereignisauslösung Steuert die Häufigkeit der Funktionsausführungen, auch bei kontinuierlichen Ereignissen

4. Praktisches Beispiel: Entprellen und Drosseln zusammen verwenden

Sie können Entprellen und Drosseln in Situationen kombinieren, in denen Sie beide Techniken zur Optimierung Ihrer Anwendung benötigen. Beispielsweise möchten Sie möglicherweise Scroll-Ereignisse drosseln und gleichzeitig Suchanfragen entprellen.

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

In diesem Beispiel:

• Das Scroll-Ereignis wird so gedrosselt, dass es nur einmal pro Sekunde ausgelöst wird.
• Die Sucheingabe wird entprellt, sodass sie erst nach 500 ms Inaktivität ausgelöst wird.

Abschluss

• Entprellen stellt sicher, dass eine Funktion nach Ablauf einer bestimmten Zeitspanne ausgeführt wird, ohne dass ein Ereignis ausgelöst wird, was es ideal für Szenarien wie Sucheingaben oder Größenänderungen macht.
• Drosselung begrenzt die Häufigkeit, mit der eine Funktion innerhalb eines bestimmten Zeitrahmens ausgeführt werden kann, was sie für Ereignisse wie Scrollen oder Fenstergrößenänderung nützlich macht.

Beide Techniken tragen dazu bei, die Leistung zu optimieren und unnötige Ausführungen zu verhindern, insbesondere in Fällen, in denen Ereignisse schnell eintreten.

---

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonEntprellen vs. Drosseln in JavaScript: Funktionsaufrufe für bessere Leistung optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!