在 JavaScript 和 React 中使用 Debounce 的详细讨论-js教程-PHP中文网

在 JavaScript 和 React 中使用 Debounce 的详细讨论

DDD

发布： 2024-09-30 12:38:02

原创

944 人浏览过

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

debounce 是 JavaScript 和 React 中的一种技术，可以快速停止重复某个函数，并在指定时间后执行该函数。它主要用于提高性能，特别是当用户执行打字或滚动等任务时。

去抖动是如何工作的？

Debounce 基本上创建了一个计时器，如果在指定时间内重复触发相同的函数，它会在执行最后一个函数之前取消其余的函数。例如，要在搜索框中键入内容时对服务器进行 API 调用，无需在每次按键时调用服务器，而是可以在键入完成后指定的时间后进行 API 调用。这可以减少服务器负载并提高应用程序性能。

如何在 JavaScript 中创建 Debounce？

Debounce 函数非常容易创建：

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

登录后复制

上面的去抖动函数

执行以下操作：

func：要去抖动的函数。
延迟：等待多长时间后函数将运行。

例子

假设我们想要在用户完成输入时对搜索框进行 API 调用：

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

登录后复制

这里debouncedSearch函数会等待500毫秒，然后调用该函数，这样多次按键就不会向服务器发送多个请求。

如何在React中使用Debounce？

在 React 应用程序中，debounce 函数通常与 useEffect 钩子一起使用。示例：

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;

登录后复制

在此示例中，查询状态随着用户键入而更新。但 debouncedQuery 状态仅在 500 毫秒后（即用户停止键入时）更新。因此，仅在需要时才进行 API 调用，而不是多次调用。