Discussion détaillée sur l'utilisation de Debounce en JavaScript et React

debounce est une technique en JavaScript et React, qui arrête rapidement de répéter une fonction et exécute la fonction après un temps spécifié. Il est principalement utilisé pour améliorer les performances, notamment lorsque l'utilisateur effectue des tâches telles que la saisie ou le défilement.

Comment fonctionne le système anti-rebond ?

Debounce crée essentiellement une minuterie et si la même fonction est déclenchée à plusieurs reprises dans un délai spécifié, elle annule le reste des fonctions avant d'exécuter la dernière fonction. Par exemple, pour effectuer un appel API à un serveur lors de la saisie dans la zone de recherche, au lieu d'appeler le serveur à chaque pression sur une touche, l'appel API peut être effectué après un délai spécifié une fois la saisie terminée. Cela réduit la charge du serveur et augmente les performances des applications.

Comment créer un anti-rebond en JavaScript ?

La

Fonction anti-rebond est très simple à créer :

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

La fonction anti-rebond ci-dessus

fait ce qui suit :

• func : La fonction à anti-rebond.
• délai : combien de temps attendre après lequel la fonction s'exécutera.

exemple

Supposons que nous souhaitions effectuer un appel API vers un champ de recherche, lorsque l'utilisateur a fini de taper :

function handleSearch(query) {
    console.log("Searching for:", query);
    // এখানে API কল হবে
}

const debouncedSearch = debounce(handleSearch, 500); // 500ms delay

// Input field এ টাইপ করার সাথে সাথে debounce ফাংশন কাজ করবে
document.getElementById('searchInput').addEventListener('input', function(event) {
    debouncedSearch(event.target.value);
});

Ici, la fonction anti-rebond Search attendra 500 millisecondes, puis appellera la fonction, afin que plusieurs pressions sur une touche n'envoient pas plusieurs requêtes au serveur.

Comment utiliser Anti-rebond dans React ?

Dans les applications React, la fonction anti-rebond est généralement utilisée avec le hook useEffect. Exemple :

import React, { useState, useEffect } from 'react';

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

    // useEffect to handle debounced query update
    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedQuery(query);
        }, 500); // 500ms delay

        // Cleanup the timeout when query changes
        return () => {
            clearTimeout(timer);
        };
    }, [query]);

    useEffect(() => {
        if (debouncedQuery) {
            console.log("Searching for:", debouncedQuery);
            // এখানে API কল হবে
        }
    }, [debouncedQuery]);

    return (
        <input 
            type="text" 
            value={query}
            onChange={(e) => setQuery(e.target.value)} 
            placeholder="Search..."
        />
    );
}

export default SearchComponent;

Dans cet exemple, l'état de la requête est mis à jour au fur et à mesure que l'utilisateur tape. Mais l’état debouncedQuery n’est mis à jour qu’après 500 millisecondes, lorsque l’utilisateur arrête de taper. Par conséquent, les appels d'API ne sont effectués qu'en cas de besoin au lieu de plusieurs fois.

Conclusion

La technique

Debounce est un moyen efficace d'améliorer les performances en JavaScript et React. Ceci est particulièrement important pour les moteurs de recherche, la validation de formulaires et les événements de défilement, où plusieurs appels inutiles à des événements doivent être évités.

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!