防抖和节流是 JavaScript 中常用的优化手段，尤其在处理高频触发事件（比如 resize、scroll、input 等）时非常有用。它们的核心思想都是控制函数执行的频率，但适用场景不同。
什么是防抖（debounce）？
防抖的意思是：在一段时间内，如果某个函数被多次调用，只执行最后一次。常见于输入框搜索建议、窗口调整等场景。
举个例子，你在搜索框里连续打字，每输入一个字符就发一次请求，显然不合理。这时候就可以用防抖来限制请求频率，比如设置 300ms 的等待时间，只有当用户停止输入 300ms 后才真正发起请求。
实现方式大致如下：
立即学习“Java免费学习笔记（深入）”；
function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}使用的时候可以这样绑定事件：
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce((e) => {
console.log('发送请求：', e.target.value);
}, 300));什么是节流（throttle）？
节流的意思是：在一定时间间隔内，无论触发多少次，只执行一次函数。常用于滚动加载、鼠标移动等场景。
比如页面滚动监听，你希望每隔一定时间检查位置，而不是每次滚动都触发，这时节流就很合适。
实现方式也比较简单：
function throttle(fn, delay) {
let lastTime = 0;
return (...args) => {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}使用示例：
window.addEventListener('scroll', throttle(() => {
console.log('当前滚动位置：', window.scrollY);
}, 200));防抖和节流的区别
简单来说：
- 防抖：等你不说话了我才执行。适合多次触发但只需要最后执行一次的情况。
- 节流：每隔一段时间执行一次。适合需要周期性执行，但不想太频繁触发的场景。
比如输入框搜索推荐用防抖；滚动到底部加载更多内容用节流更合适。
基本上就这些。理解清楚两者的应用场景，再结合实际代码练习几次，就能灵活运用了。
