Améliorer les performances en JavaScript : comprendre l'anti-rebond et la limitation

Table des matières

• Anti-rebond : un retard stratégique
  • Comment fonctionne l'anti-rebond
  • Exemple anti-rebond
• Limitation : contrôle de la fréquence des événements
  • Comment fonctionne la limitation
  • Exemple de limitation
• Implémentation dans React : anti-rebond et limitation avec des hooks personnalisés
  • Crochet personnalisé pour anti-rebond
  • Utiliser le crochet anti-rebond
  • Crochet personnalisé pour la limitation
  • Utiliser le crochet d'accélérateur
• Pensées finales

L'optimisation des performances est essentielle dans les applications Web modernes, en particulier celles qui impliquent des interactions utilisateur telles que la saisie dans une barre de recherche, le défilement ou le redimensionnement d'une fenêtre. Ces actions peuvent déclencher de nombreux appels de fonction en peu de temps, ce qui peut dégrader les performances.

Pour atténuer cela, deux techniques courantes sont le anti-rebond et le limitation, qui vous permettent de contrôler la vitesse à laquelle une fonction est invoquée, conduisant à une expérience plus fluide et plus efficace.

Anti-rebond : un retard stratégique

Debouncing retarde l'exécution d'une fonction jusqu'à ce qu'un temps spécifié se soit écoulé depuis le dernier déclencheur d'événement. Cela est particulièrement utile lorsque vous traitez des événements tels que les entrées de recherche, où vous souhaitez éviter de faire une requête API à chaque frappe.

Comment fonctionne l'anti-rebond

Imaginez une entrée de recherche dans laquelle vous souhaitez attendre que l'utilisateur ait arrêté de taper pendant 300 ms avant de faire une requête API. L'anti-rebond vous permet de garantir que la fonction n'est exécutée qu'après que l'utilisateur a interrompu la saisie, évitant ainsi les appels d'API inutiles.

Exemple anti-rebond

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

Ici, la requête API ne sera effectuée que si l'utilisateur fait une pause de 300 ms.

Limitation : contrôle de la fréquence des événements

Contrairement à l'anti-rebond, la limitation garantit qu'une fonction est appelée au plus une fois à chaque intervalle spécifié, même si l'événement continue de se déclencher. Cette technique est idéale pour des scénarios tels que le redimensionnement ou le défilement de fenêtres, où les événements se déclenchent en continu.

Comment fonctionne la limitation

La limitation permet à une fonction de s'exécuter une seule fois pendant une période définie (par exemple, 200 ms), garantissant que la fonction n'est pas submergée par des déclencheurs répétés.

Exemple de limitation

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);

Dans cet exemple, la fonction de mise à jour de la mise en page ne sera appelée qu'une fois toutes les 200 ms lors du redimensionnement de la fenêtre.

Implémentation dans React : anti-rebond et limitation avec des hooks personnalisés

Dans React, nous pouvons utiliser des hooks personnalisés pour rendre les fonctionnalités anti-rebond et d'accélération réutilisables sur tous les composants. Cela améliore la modularité et optimise les performances dans diverses interactions.

Crochet personnalisé pour anti-rebond

<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>

Utiliser le crochet anti-rebond

<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>

Crochet personnalisé pour la limitation

<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>

Utilisation du crochet d'accélérateur

<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>

Pensées finales

Le anti-rebond et le limitation sont des techniques indispensables pour améliorer les performances des applications modernes. Alors que l'anti-rebond est idéal pour les entrées telles que les champs de recherche, la limitation est mieux adaptée aux événements à haute fréquence comme le défilement. Les hooks personnalisés dans React, comme useDebounce et useThrottle, rendent ces optimisations faciles à mettre en œuvre dans votre application, garantissant une expérience plus efficace et plus réactive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!