React 中的去抖與節流

React 中的去抖與節流

去抖動和限制都是控制函數執行速率的技術，通常用於在處理調整大小、滾動或打字等事件時提高效能。簡單解釋一下：

---

1. 去抖動

定義：自上次呼叫函數起經過指定的延遲後執行函數。如果事件持續觸發，計時器將重設。

用例：當您希望函數在使用者停止觸發事件後僅執行一次。
範例：使用者停止在搜尋框中輸入內容後呼叫 API。

程式碼範例（React 中的去抖）

導入 React, { useState } from "react";

函數 debounce(func, 延遲) {
讓定時器；
返回（...args）=> {
清除逾時（計時器）； // 清空先前的定時器
計時器 = setTimeout(() => func(...args), 延遲); // 設定新的計時器
};
}

const App = () =>; {
const [value, setValue] = useState("");

const handleChange = debounce((e) => {
console.log("API 呼叫：", e.target.value);
}, 1000);

返回（
類型=“文本”
onChange={(e) =>; {
setValue(e.target.value);
處理更改(e);
}}
值={值}
placeholder="輸入內容..."
//>
);
};

匯出預設應用程式；

行為：函數 (handleChange) 僅在使用者停止輸入 1 秒後執行。

---

1. 節流

定義：在指定的時間間隔內最多執行一次函數，即使事件不斷觸發。

使用案例：當您希望函數在頻繁事件期間以一致的時間間隔運行時。
範例：記錄滾動時頁面的位置。

程式碼範例（React 中的限制）

導入 React, { useEffect } from "react";

函數式節流閥(func, limit) {
讓lastFunc;
讓最後一次；
返回（...args）=> {
const now = Date.now();
if (!lastTime || now - lastTime >= limit) {
func(...args);
上次=現在;
} 其他 {
清除超時(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - 最後時間 >= 限制) {
func(...args);
最後時間 = Date.now();
}
}, 限制 - (現在 - 上次));
}
};
}

const App = () =>; {
consthandleScroll=throttle(()=>{
console.log("記錄滾動事件：", window.scrollY);
}, 1000);

useEffect(() => {
window.addEventListener("scroll", handleScroll);
返回() => window.removeEventListener("scroll", handleScroll);
}, []);

返回

向下捲動頁面；
};

匯出預設應用程式；

行為：handleScroll 函數每秒最多記錄一次滾動位置，即使滾動事件連續觸發。

---

以上是React 中的去抖與節流的詳細內容。更多資訊請關注PHP中文網其他相關文章！