debounce 是 JavaScript 和 React 中的一種技術，可以快速停止重複某個函數，並在指定時間後執行函數。它主要用於提高效能，特別是當使用者執行打字或滾動等任務時。
Debounce 基本上創建了一個計時器，如果在指定時間內重複觸發相同的函數，它會在執行最後一個函數之前取消其餘的函數。例如，要在搜尋框中鍵入內容時對伺服器進行 API 調用，無需在每次按鍵時調用伺服器，而是可以在鍵入完成後指定的時間後進行 API 呼叫。這可以減少伺服器負載並提高應用程式效能。
Debounce 函數非常容易建立：
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
執行以下操作：
假設我們想要在使用者完成輸入時對搜尋框進行 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 函數通常與 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中文網其他相關文章！
