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中文网其他相关文章！