Perbincangan terperinci tentang menggunakan Debounce dalam JavaScript dan React

debounce ialah teknik dalam JavaScript dan React, yang dengan cepat berhenti mengulang fungsi dan melaksanakan fungsi selepas masa yang ditentukan. Ia digunakan terutamanya untuk meningkatkan prestasi, terutamanya apabila pengguna melakukan tugas seperti menaip atau menatal.

Bagaimanakah Debounce berfungsi?

Debounce pada asasnya mencipta pemasa dan jika fungsi yang sama dicetuskan berulang kali dalam masa yang ditentukan, ia membatalkan fungsi yang lain sebelum melaksanakan fungsi terakhir. Sebagai contoh, untuk membuat panggilan API ke pelayan semasa menaip dalam kotak carian, bukannya memanggil pelayan pada setiap tekan kekunci, panggilan API boleh dibuat selepas masa yang ditentukan setelah penaipan selesai. Ini mengurangkan beban pelayan dan meningkatkan prestasi aplikasi.

Bagaimana untuk membuat Debounce dalam JavaScript?

Fungsi

Debounce sangat mudah untuk dibuat:

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

Fungsi nyahlantun di atas

melakukan perkara berikut:

• fungsi: Fungsi yang akan dinyahpantulkan.
• kelewatan: berapa lama menunggu selepas itu fungsi akan dijalankan.

contoh

Andaikan kita ingin membuat panggilan API ke kotak carian, apabila pengguna selesai menaip:

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

Di sini fungsi debouncedSearch akan menunggu 500 milisaat, kemudian panggil fungsi tersebut, supaya beberapa penekanan kekunci tidak menghantar berbilang permintaan ke pelayan.

Bagaimana untuk menggunakan Debounce dalam React?

Dalam aplikasi React, fungsi nyahlantun biasanya digunakan dengan cangkuk useEffect. Contoh:

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;

Dalam contoh ini, keadaan pertanyaan dikemas kini semasa pengguna menaip. Tetapi keadaan debouncedQuery hanya dikemas kini selepas 500 milisaat, apabila pengguna berhenti menaip. Akibatnya, panggilan API dibuat hanya apabila diperlukan dan bukannya beberapa kali.

Kesimpulan

Teknik

Debounce ialah cara yang berkesan untuk meningkatkan prestasi dalam JavaScript dan React. Ini amat penting untuk enjin carian, pengesahan borang dan acara tatal, di mana beberapa panggilan ke acara yang tidak perlu perlu dielakkan.

Atas ialah kandungan terperinci Perbincangan terperinci tentang menggunakan Debounce dalam JavaScript dan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!