Maison interface Web js tutoriel Discussion détaillée sur l'utilisation de Debounce en JavaScript et React

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

Sep 30, 2024 pm 12:38 PM

JavaScript এবং React এ Debounce ব্যবহার সম্পর্কে বিস্তারিত আলোচনা

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);
    };
}
Copier après la connexion
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);
});
Copier après la connexion

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;
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

10 Highlighters de syntaxe jQuery

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

10 tutoriels JavaScript & jQuery MVC

See all articles