去抖动和节流是 JavaScript 中使用的两种技术，用于优化频繁触发的函数的执行，尤其是在响应用户交互（如滚动、调整大小或键入）时。
去抖动
Debouncing 确保函数仅在最后一个 trigger 事件之后的指定延迟后运行。这可以防止在事件重复触发时进行过多的函数调用。
实际示例：在搜索栏中键入内容
假设用户在搜索栏中键入内容。如果不去抖动，每次击键都会触发一个 API 请求，这可能会使服务器不堪重负。相反，使用防抖时，该函数会等到用户在短时间内停止键入后再发出请求。
JavaScript 示例（消除搜索输入的抖动）：
function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
const searchAPI = (query) => {
console.log("Fetching search results for:", query);
};
const debouncedSearch = debounce(searchAPI, 500);
document.getElementById("searchBox").addEventListener("input", (event) => {
debouncedSearch(event.target.value);
});
🔹 效果：该函数仅在用户停止键入 500 毫秒后执行。searchAPI
节流
限制可确保函数在特定间隔内最多执行一次，即使它被多次触发。这对于滚动等性能密集型任务非常有用。
实际示例：滚动事件处理
想象一下用户滚动浏览网站。如果不进行限制，事件侦听器每秒可能会触发数十次，这可能会导致性能问题。限制可确保函数以受控速率运行。
JavaScript 示例（限制滚动事件）：
function throttle(func, limit) {
let lastCall = 0;
return function (...args) {
const now = Date.now();
if (now - lastCall >= limit) {
lastCall = now;
func.apply(this, args);
}
};
}
const logScrollPosition = () => {
console.log("Scroll position:", window.scrollY);
};
const throttledScroll = throttle(logScrollPosition, 1000);
window.addEventListener("scroll", throttledScroll);
🔹 效果：函数每秒最多执行一次，防止滚动时调用过多。logScrollPosition
主要区别
| 方面 | 去抖动 | 节流 |
|---|---|---|
| 执行计时 | 在最后一个触发器之后的延迟之后 | 在固定时间间隔内最多一次 |
| 用例 | 搜索输入、按钮点击 | 滚动事件，调整事件大小 |
| 防止 | 快速连续通话 | 函数执行过多 |
这两种技术都通过减少不必要的函数调用来提高性能，从而保持应用程序的流畅和高效。由于您使用的是 ReactJS，因此您可以在 React 组件中对搜索输入使用去抖动，对窗口大小调整处理程序使用节流。
发表评论 取消回复