下面给你最常用、最标准、直接可复制的防抖 & 节流实现，附带使用示例，一看就会。
1. 防抖（Debounce）
原理：频繁触发时，只在最后一次触发后延迟执行，中间全部忽略。
最简实现
function debounce(fn, delay = 300) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
使用示例（搜索框）
const onSearch = debounce((value) => {
console.log("请求搜索:", value);
}, 500);
input.addEventListener("input", (e) => {
onSearch(e.target.value);
});
2. 节流（Throttle）
原理：固定时间内只执行一次，不管触发多频繁。
时间戳版（立即执行，更常用）
function throttle(fn, interval = 300) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= interval) {
fn.apply(this, args);
lastTime = now;
}
};
}
使用示例（滚动）
const handleScroll = throttle(() => {
console.log("滚动位置", window.scrollY);
}, 300);
window.addEventListener("scroll", handleScroll);
3. 带立即执行的防抖（可选）
有些场景希望第一次立即执行，后面再防抖：
function debounceImmediate(fn, delay = 300) {
let timer = null;
return function (...args) {
const isFirst = !timer;
clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
}, delay);
if (isFirst) {
fn.apply(this, args);
}
};
}
4. 快速记忆
- 防抖：等你停手再执行 → 搜索框、输入验证、按钮防重复点击
- 节流：冷却时间 → 滚动、拖拽、resize、高频点击
需要我给你写一个带取消功能、支持立即执行、兼容 React 的高级版防抖节流吗？
