Verbessern der Leistung in JavaScript: Entprellen und Drosseln verstehen

Inhaltsverzeichnis

• Entprellen: Eine strategische Verzögerung
  • Wie das Entprellen funktioniert
  • Beispiel zur Entprellung
• Drosselung: Kontrolle der Ereignishäufigkeit
  • So funktioniert die Drosselung
  • Drosselungsbeispiel
• Implementierung in React: Entprellen und Drosseln mit benutzerdefinierten Hooks
  • Benutzerdefinierter Hook zum Entprellen
  • Verwendung des Debounce Hook
  • Benutzerdefinierter Haken zur Drosselung
  • Verwendung des Gashebels
• Abschließende Gedanken

Leistungsoptimierung ist in modernen Webanwendungen von entscheidender Bedeutung, insbesondere bei solchen, die Benutzerinteraktionen wie das Eingeben einer Suchleiste, das Scrollen oder die Größenänderung eines Fensters beinhalten. Diese Aktionen können in kurzer Zeit viele Funktionsaufrufe auslösen, was die Leistung beeinträchtigen kann.

Um dies zu mildern, gibt es zwei gängige Techniken: Entprellen und Drosseln, mit denen Sie die Rate steuern können, mit der eine Funktion aufgerufen wird, was zu einem reibungsloseren und effizienteren Erlebnis führt.

Entprellen: Eine strategische Verzögerung

Entprellen verzögert die Ausführung einer Funktion, bis eine bestimmte Zeit seit dem letzten Ereignisauslöser vergangen ist. Dies ist besonders hilfreich beim Umgang mit Ereignissen wie Sucheingaben, bei denen Sie vermeiden möchten, bei jedem Tastendruck eine API-Anfrage zu stellen.

So funktioniert das Entprellen

Stellen Sie sich eine Sucheingabe vor, bei der Sie 300 ms warten möchten, bis der Benutzer mit der Eingabe aufgehört hat, bevor Sie eine API-Anfrage stellen. Mit der Enthüllung können Sie sicherstellen, dass die Funktion erst ausgeführt wird, nachdem der Benutzer die Eingabe unterbrochen hat, und so unnötige API-Aufrufe verhindern.

Beispiel für eine Entprellung

function debounce(func, delay) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}
function searchAPI() {
  console.log("API request made");
}
const debouncedSearch = debounce(searchAPI, 300);
debouncedSearch(); // Only triggers 300ms after the last call

Hier wird die API-Anfrage nur gestellt, wenn der Benutzer 300 ms pausiert.

Drosselung: Kontrolle der Ereignishäufigkeit

Im Gegensatz zum Entprellen stellt die Drosselung sicher, dass eine Funktion höchstens einmal in jedem angegebenen Intervall aufgerufen wird, auch wenn das Ereignis weiterhin ausgelöst wird. Diese Technik ist ideal für Szenarien wie die Größenänderung von Fenstern oder das Scrollen, bei denen die Ereignisse kontinuierlich ausgelöst werden.

So funktioniert die Drosselung

Durch die Drosselung kann eine Funktion nur einmal während eines definierten Zeitraums (z. B. 200 ms) ausgeführt werden, wodurch sichergestellt wird, dass die Funktion nicht durch wiederholte Auslöser überlastet wird.

Drosselungsbeispiel

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function () {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}
function updateLayout() {
  console.log("Layout updated");
}
const throttledUpdate = throttle(updateLayout, 200);
window.addEventListener("resize", throttledUpdate);

In diesem Beispiel wird die Layout-Aktualisierungsfunktion während der Fenstergrößenänderung nur einmal alle 200 ms aufgerufen.

Implementierung in React: Entprellen und Drosseln mit benutzerdefinierten Hooks

In React können wir benutzerdefinierte Hooks verwenden, um die Entprell- und Drosselungsfunktion komponentenübergreifend wiederverwendbar zu machen. Dies verbessert die Modularität und optimiert die Leistung in verschiedenen Interaktionen.

Benutzerdefinierter Haken zum Entprellen

<p>import { useRef, useCallback } from "react";<br>
const useDebounce = (func, delay) => {<br>
  const timer = useRef(null);<br>
  return useCallback(<br>
    (...args) => {<br>
      if (timer.current) {<br>
        clearTimeout(timer.current);<br>
      }<br>
      timer.current = setTimeout(() => func(...args), delay);<br>
    },<br>
    [func, delay]<br>
  );<br>
};<br>
export default useDebounce;</p>

Verwendung des Debounce Hook

<p>import React, { useState } from "react";<br>
import useDebounce from "./useDebounce";<br>
const SearchComponent = () => {<br>
  const [searchTerm, setSearchTerm] = useState("");</p>

<p>const fetchResults = (query) => {<br>
    console.log(Fetching results for </span><span class="p">${</span><span class="nx">query</span><span class="p">}</span><span class="s2">);<br>
    return new Promise((resolve) => setTimeout(resolve, 1000));<br>
  };<br>
  const debouncedFetch = useDebounce(fetchResults, 300);<br>
  const handleSearch = (e) => {<br>
    setSearchTerm(e.target.value);<br>
    debouncedFetch(e.target.value);<br>
  };<br>
  return <input value={searchTerm} onChange={handleSearch} placeholder="Search..." />;<br>
};<br>
export default SearchComponent;</p>

Benutzerdefinierter Haken zur Drosselung

<p>import { useRef, useCallback } from "react";<br>
const useThrottle = (func, limit) => {<br>
  const lastRun = useRef(Date.now());<br>
  return useCallback(<br>
    (...args) => {<br>
      const now = Date.now();<br>
      if (now - lastRun.current >= limit) {<br>
        func(...args);<br>
        lastRun.current = now;<br>
      }<br>
    },<br>
    [func, limit]<br>
  );<br>
};<br>
export default useThrottle;</p>

Verwendung des Gashebels

<p>import React, { useEffect } from "react";<br>
import useThrottle from "./useThrottle";</p>

<p>const ScrollComponent = () => {<br>
  const handleScroll = () => {<br>
    console.log("Scrolled!");<br>
  };<br>
  const throttledScroll = useThrottle(handleScroll, 500);<br>
  useEffect(() => {<br>
    window.addEventListener("scroll", throttledScroll);<br>
    return () => window.removeEventListener("scroll", throttledScroll);<br>
  }, [throttledScroll]);<br>
  return <div style={{ height: "200vh" }}>Scroll down to see the effect</div>;<br>
};<br>
export default ScrollComponent;</p>

Abschließende Gedanken

Sowohl Entprellen als auch Drosseln sind unverzichtbare Techniken zur Leistungssteigerung in modernen Anwendungen. Während die Entprellung ideal für Eingaben wie Suchfelder ist, eignet sich die Drosselung am besten für hochfrequente Ereignisse wie Scrollen. Benutzerdefinierte Hooks in React, wie useDebounce und useThrottle, erleichtern die Implementierung dieser Optimierungen in Ihrer App und sorgen so für ein effizienteres, reaktionsfähigeres Erlebnis.

Das obige ist der detaillierte Inhalt vonVerbessern der Leistung in JavaScript: Entprellen und Drosseln verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!