在 typescript 中实现防抖（debounce）和节流（throttle），核心思路是利用闭包保存定时器状态，并通过泛型约束确保回调函数及其参数的类型安全。具体做法是定义一个高阶函数，接收原始回调和延迟时间，返回一个新的包装函数；在包装函数内部，使用 settimeout 或记录上次执行时间来控制调用频率，并在返回的函数中正确传递 this 上下文和参数。这样既能保持 javascript 原有的行为，又能获得编译时的类型检查。
如何编写支持任意参数类型的通用防抖函数
编写通用防抖函数的关键在于处理可变数量的参数和正确的上下文绑定。我们需要定义一个泛型接口来描述回调函数，然后在防抖逻辑中使用 apply 方法将调用时的参数数组传递给原始回调。同时，必须清除之前的定时器以防止重复触发，并确保返回的新函数保留了原始函数的属性（如名称）以便调试。
function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): T {
let timer: ReturnType<typeof setTimeout> | null = null;
// 使用 Function 构造器或类型断言来处理复杂的泛型返回
const debouncedFn = function(this: ThisParameterType<T>, ...args: Parameters<T>) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
} as unknown as T;
// 保留原始函数的属性
debouncedFn.toString = () => fn.toString();
return debouncedFn;
}
// 使用示例
const handleInput = debounce((value: string) => {
console.log(`Searching for: ${value}`);
}, 300);
如何实现带立即执行选项的节流函数
实现节流函数需要区分首次调用和后续调用的行为。通过引入一个 leading 布尔参数，可以控制是否在延迟开始时立即执行一次回调。在每次调用时，检查当前时间与上次执行时间的差值，如果超过设定间隔则执行并更新时间戳；如果是立即执行模式，则在首次调用时直接执行，随后进入等待期。这种实现方式适用于滚动加载或按钮点击等场景。
立即学习“Java免费学习笔记（深入）”；
function throttle<T extends (...args: any[]) => void>(fn: T, interval: number, options: { leading?: boolean } = {}): T {
let lastTime = 0;
let timer: ReturnType<typeof setTimeout> | null = null;
const { leading = true } = options;
const throttledFn = function(this: ThisParameterType<T>, ...args: Parameters<T>) {
const now = Date.now();
const remaining = interval - (now - lastTime);
if (lastTime === 0 || remaining <= 0) {
if (timer) {
clearTimeout(timer);
timer = null;
}
lastTime = now;
fn.apply(this, args);
} else if (!leading && !timer) {
// trailing edge 执行
timer = setTimeout(() => {
lastTime = Date.now();
timer = null;
fn.apply(this, args);
}, remaining);
}
} as unknown as T;
throttledFn.toString = () => fn.toString();
return throttledFn;
}
// 使用示例
const handleScroll = throttle((e: Event) => {
console.log('Scrolling...', window.scrollY);
}, 100, { leading: false });
当防抖函数被多次快速调用时，最后一次调用会如何执行
当防抖函数被多次快速调用时，前几次调用设置的定时器会被后续的调用清除，只有最后一次调用后经过设定的延迟时间，回调函数才会真正执行。这意味着无论中间触发了多少次，最终只会在用户停止操作后的指定时间点执行一次逻辑，从而有效减少高频事件带来的性能开销。例如在搜索框输入时，只有用户停止打字 300 毫秒后，才会发起网络请求。
