在 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 調用，而不是多次調用。

結論

Debounce 技術是提高 JavaScript 和 React 效能的有效方法。這對於搜尋引擎、表單驗證和捲動事件尤其重要，因為需要避免不必要的多次呼叫事件。

以上是在 JavaScript 和 React 中使用 Debounce 的詳細討論的詳細內容。更多資訊請關注PHP中文網其他相關文章！