[Übersetzungen] Animationen mit Throttle in JavaScript implementieren

Link zum Originalartikel

---

Animationen mit Throttle in JavaScript implementieren

In diesem Dokument wird erläutert, wie Sie die Animationsleistung mithilfe von Throttle in JavaScript verbessern und Throttle anwenden, um das Problem abgehackter Scroll-Animationen zu lösen. Außerdem werden die Unterschiede vor und nach dem Gasgeben verglichen.

Was ist Drossel?

Throttle ist eine Technik, die den Aufruf einer Funktion „höchstens einmal“ innerhalb eines „bestimmten Zeitintervalls“ einschränkt. Mit anderen Worten: Selbst wenn ein Ereignis innerhalb eines kurzen Zeitraums mehrmals auftritt, wird die Funktion nur einmal innerhalb des durch die Drossel eingestellten Zeitintervalls ausgeführt. Wenn eine Funktion beispielsweise eine Drosselung von 100 ms hat, wird die Funktion maximal 10 Mal ausgeführt (in 100-ms-Intervallen), selbst wenn das Ereignis 10 Mal in 1 Sekunde auftritt.

Wo wird die Drossel eingesetzt?

Gas kann in folgenden Situationen verwendet werden:

• Verhindern von Leistungseinbußen aufgrund übermäßiger Ereignisauslösung: Wenn Ereignisse wie Scrollen, Mausbewegungen und Fenstergrößenänderungen häufig in kurzer Zeit auftreten, kann der Ereignishandler übermäßig ausgeführt werden, was zu Leistungsproblemen führt. Um dies zu mildern, wird Gas eingesetzt.
• Animationen flüssiger machen: Wenn kontinuierliche Änderungen ausgedrückt werden müssen, wie z. B. Scroll-Animationen, kann die Animation je nach Ereignishäufigkeit abgehackt oder ruckeln. Durch die Verwendung von Gas können Animationen flüssiger werden.

Problem: Stotternde und abgehackte Scroll-Animationen

Es wurde versucht, eine reibungslose Scroll-Animation entsprechend dem Scrollrad-Ereignis zu implementieren, aber vor dem Anwenden von Gas war die Animation abgehackt.

Grund: Dies liegt daran, dass das Wheel-Ereignis mit einer sehr hohen Rate auftritt, was dazu führt, dass die Funktion „window.scrollBy“ übermäßig oft aufgerufen wird, wodurch verhindert wird, dass der Browser alle Anfragen verarbeiten kann.

Vergleich

1. Code vor dem Gas geben

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

In diesem Code wird die handleWheel-Funktion jedes Mal ausgeführt, wenn ein Wheel-Ereignis auftritt. Diese Funktion berechnet den Bildlaufumfang mithilfe des deltaY-Werts des Ereignisses und scrollt durch Aufrufen der Funktion window.scrollBy. Das Problem besteht darin, dass das Radereignis mehrmals in einem sehr kurzen Zeitraum auftreten kann, was dazu führt, dass window.scrollBy übermäßig oft aufgerufen wird, was zu einer abgehackten Animation führt.

2. Code nach Gasgeben

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

Im gedrosselten Code wird die Variable „drosselTimer“ verwendet, um die Funktionsausführung zu verwalten. Der Vorgang funktioniert wie folgt:

• Wenn die handleWheel-Funktion aufgerufen wird, prüft sie, ob ThrottleTimer vorhanden ist.
• Wenn „drosselTimer“ existiert (was bedeutet, dass ein zuvor eingestellter Timer noch aktiv ist), kehrt die Funktion sofort zurück. Dadurch wird verhindert, dass neue Scroll-Anfragen verarbeitet werden, während bereits eine Scroll-Animation ausgeführt wird.
• Wenn „drosselTimer“ nicht existiert, wird event.preventDefault() aufgerufen, um das standardmäßige Bildlaufverhalten zu verhindern, und setTimeout wird verwendet, um die Funktion „window.scrollBy“ nach 16 ms auszuführen.
• Innerhalb der Rückruffunktion setTimeout wird ThrottleTimer auf Null gesetzt, wodurch die Drossel zurückgesetzt wird und die Funktion nach der Verzögerung erneut aufgerufen werden kann.

3. Mögliche Verbesserungen

• Anfängliche Verzögerung von setTimeout

  setTimeout wird verwendet, um den Drosselungsmechanismus zu implementieren. setTimeout führt die Callback-Funktion nach der angegebenen Verzögerung (in diesem Fall 16 ms) aus. Folglich wird window.scrollBy nach einer Verzögerung von 16 ms aufgerufen, wenn das erste Radereignis auftritt. Diese anfängliche Verzögerung kann zu einem wahrgenommenen Mangel an sofortiger Reaktionsfähigkeit führen und möglicherweise als Stottern interpretiert werden, insbesondere bei schnellen Radbewegungen. (Weitere Verbesserungen werden in Zukunft untersucht...)

Das obige ist der detaillierte Inhalt von[Übersetzungen] Animationen mit Throttle in JavaScript implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!