JavaScript ist fantastisch darin, Ihre Web-Apps dynamisch und interaktiv zu gestalten, aber eines kann es alleine nicht gut bewältigen: häufige Ereignisse. Denken Sie an Dinge wie die Größenänderung von Fenstern, das Scrollen und das Eingeben von Text in Suchfelder. Wenn sie nicht richtig verwaltet werden, können diese Ihre App mit Ereignisauslösern überschwemmen, die Dinge verlangsamen und zu einer trägen Benutzererfahrung führen. Hier kommen Entprellen und Drosseln ins Spiel. Mit diesen Techniken können Sie steuern, wie oft bestimmte Funktionen ausgeführt werden, damit Ihre App schnell und reaktionsfähig bleibt.

In diesem Artikel werden wir Entprellen und Drosseln aufschlüsseln, Ihnen zeigen, wann Sie sie verwenden sollten, und Beispiele aus der Praxis bereitstellen, um sie in Aktion zu sehen. Lassen Sie uns in diese wesentlichen Techniken zur JavaScript-Leistungsoptimierung eintauchen!

Was ist Entprellen?

Wie es funktioniert

Stellen Sie sich das Entprellen so vor, als würden Sie darauf warten, dass jemand mit dem Sprechen fertig ist, bevor Sie mit Ihrer Antwort einsteigen. Wenn Sie jemals in einem Gespräch waren, in dem Sie ständig jemand unterbricht, werden Sie es verstehen! Das Schlüsselkonzept der Entprellung besteht darin, dass die Ausführung einer Funktion verzögert wird, bis eine bestimmte Zeit seit der letzten Auslösung des Ereignisses vergangen ist.

Einfach ausgedrückt: Wenn ein Ereignis (z. B. die Eingabe eines Benutzers) weiterhin schnell geschieht, stellt die Entprellung sicher, dass die zugehörige Funktion (z. B. eine Suchabfrage) erst ausgeführt wird, nachdem der Benutzer für einen bestimmten Zeitraum angehalten hat.

Wann sollte die Entprellung verwendet werden?

Sie sollten die Entprellung verwenden, wenn Sie übermäßige Funktionsaufrufe begrenzen möchten, die durch häufige Benutzereingaben verursacht werden. Ein klassisches Beispiel ist, wenn Sie über ein Suchfeld verfügen und jedes Mal, wenn der Benutzer etwas eingibt, einen API-Aufruf durchführen möchten. Ohne Entprellen könnte die API bei jedem Tastendruck aufgerufen werden, was zu einer unnötigen Belastung Ihres Servers führen würde. Beim Entprellen wird die API erst aufgerufen, wenn der Benutzer mit der Eingabe aufhört.

Entprellen im Code

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

// Usage
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
    console.log('API call made!');
}, 300)); // Only executes 300ms after the last keystroke

In diesem Beispiel stellt die Debounce-Funktion sicher, dass der API-Aufruf erst 300 Millisekunden erfolgt, nachdem der Benutzer mit der Eingabe aufgehört hat.

Was ist Drosselung?

Wie es sich vom Entprellen unterscheidet

Lassen Sie uns nun über die Drosselung sprechen. Wenn Entprellen auf eine Reaktion wartet, bis das Geschwätz verstummt, ist Drosseln wie ein Verkehrspolizist, der nur alle paar Sekunden ein Auto durchlässt, egal wie viele Autos warten. Es stellt sicher, dass eine Funktion in jedem festgelegten Zeitraum höchstens einmal aufgerufen wird, auch wenn das Ereignis wiederholt ausgelöst wird.

Wann sollte die Drosselung verwendet werden?

Sie sollten die Drosselung verwenden, wenn Sie eine konsistente Ausführung über einen längeren Zeitraum sicherstellen müssen. Wenn ein Benutzer beispielsweise auf einer Seite nach unten scrollt, kann das Scroll-Ereignis Dutzende Male pro Sekunde ausgelöst werden. Ohne Drosselung könnte Ihre App langsamer werden, da sie versucht, all diese Ereignisse zu verarbeiten. Durch die Drosselung wird begrenzt, wie oft der Scroll-Ereignishandler ausgeführt werden kann, wodurch die Leistung verbessert wird.

Drosselung im Code

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

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

Hier stellt die Drosselfunktion sicher, dass der Scroll-Event-Handler nur einmal alle 1000 Millisekunden ausgeführt wird, um sicherzustellen, dass Ihre App nicht überlastet wird.

Beispiele aus der Praxis

Lassen Sie uns diese Techniken in einen praktischeren Kontext stellen. Angenommen, Sie erstellen eine React-App, bei der Benutzer etwas in ein Suchfeld eingeben. Sie können die Eingabeereignisse entprellen, um zu verhindern, dass Ihr Server mit API-Aufrufen überflutet wird. Wenn Sie alternativ verfolgen, wie weit der Benutzer auf der Seite gescrollt hat, können Sie die Leistung mithilfe der Drosselung optimieren.

Entprellen in React

import { useState } from 'react';

function SearchComponent() {
    const [query, setQuery] = useState('');

    const handleSearch = debounce((value) => {
        // API call with the value
        console.log('Searching for:', value);
    }, 300);

    return (
         {
                setQuery(e.target.value);
                handleSearch(e.target.value);
            }}
        />
    );
}

Scroll-Ereignisse drosseln

import { useEffect } from 'react';

function ScrollTracker() {
    useEffect(() => {
        const handleScroll = throttle(() => {
            console.log('Scrolling...');
        }, 1000);

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return 
Scroll to see throttling in action!
;
}

Best Practices zur Leistungsoptimierung

Entprellen vs. Drosseln: Wann sollte man sich entscheiden?

Hier ist eine kurze Faustregel:

• Entprellen ist perfekt, wenn Sie warten möchten, bis der Benutzer aufhört, etwas zu tun. Zum Beispiel beim Eingeben in eine Suchleiste.
• Die Drosselung funktioniert am besten, wenn Sie eine konsistente, regelmäßige Ausführung über einen längeren Zeitraum hinweg sicherstellen möchten. Es ist ideal zum Scrollen oder Ändern der Fenstergröße.

Wenn Sie wissen, mit welcher Art von Ereignis Sie es zu tun haben und wie oft es auslöst, können Sie die richtige Technik für die Aufgabe auswählen.

Abschluss

Die Kontrolle häufiger Ereignisse in JavaScript ist für die Optimierung der Leistung unerlässlich, und sowohl Entprellen als auch Drosseln bieten leistungsstarke Lösungen. Indem Sie verstehen, wann Sie die einzelnen Elemente verwenden, können Sie Ihre Webanwendungen reibungsloser und reaktionsfähiger gestalten, sei es für die Verarbeitung von Sucheingaben, die Größenänderung von Fenstern oder die Verwaltung von Scroll-Ereignissen.

Wenn Sie das nächste Mal feststellen, dass Ihre App durch zu viele Ereignisse blockiert wird, fragen Sie sich: Soll ich entprellen oder drosseln? Sie werden es nicht bereuen!

Bereit, es auszuprobieren? Wenn Sie das nächste Mal an einem Projekt arbeiten, probieren Sie diese Techniken aus. Sie werden überrascht sein, wie viel glatter sich alles anfühlt!