TypeScript中防抖和节流函数需保留原函数泛型签名，返回带cancel/flush方法的交集类型，定时器用ReturnType，参数与返回值类型严格推导。
在 TypeScript 中编写类型安全的防抖（debounce）和节流（throttle）函数，关键在于保留原函数的参数类型、返回值类型，并正确处理定时器的类型与生命周期。下面给出简洁、可复用、类型完整的实现。
✅ 防抖函数（Debounce）
防抖要求：在最后一次调用后等待指定时间，若期间有新调用则重置计时器。需支持取消（cancel）、立即执行（leading）等行为，同时不丢失泛型信息。
类型要点：
- 使用 泛型 F extends (...args: any[]) => any 捕获原函数签名；
- 返回函数类型与原函数一致（参数、返回值完全兼容）；
- 定时器 ID 类型用 NodeJS.Timeout（Node）或 number（浏览器），推荐统一用 ReturnType
实现示例：
function debounce<F extends (...args: any[]) => any>(
fn: F,
delay: number,
options: { leading?: boolean; trailing?: boolean } = {}
): ((...args: Parameters<F>) => void) & { cancel(): void; flush(): void } {
let timer: ReturnType<typeof setTimeout> | null = null;
const { leading = false, trailing = true } = options;
<p>const debounced = (...args: Parameters<F>): void => {
if (timer) clearTimeout(timer);</p><pre class="brush:php;toolbar:false;">if (leading && !timer) {
fn(...args);
}
if (trailing) {
timer = setTimeout(() => {
fn(...args);
timer = null;
}, delay);
}};
debounced.cancel = () => { if (timer) { clearTimeout(timer); timer = null; } };
debounced.flush = () => { if (timer) { clearTimeout(timer); timer = null; // 立即执行最后一次缓存的调用（需保存 args） // 实际中建议用闭包缓存 lastArgs，此处为简化略过 // 完整版应记录 args 并在此调用 fn(...lastArgs) } };
return debounced as any; // 类型稍作断言（见下方优化说明） }
⚠️ 注意：上面 debounced 的返回类型严格来说不是纯函数类型（带 cancel/flush 方法），所以最终返回需用 intersection type 显式声明。更严谨写法如下：
type DebouncedFunction<F extends (...args: any[]) => any> = {
(...args: Parameters<F>): void;
cancel(): void;
flush(): void;
};
<p>function debounce<F extends (...args: any[]) => any>(
fn: F,
delay: number,
options: { leading?: boolean; trailing?: boolean } = {}
): DebouncedFunction<F> { ... }✅ 节流函数（Throttle）
节流要求：固定间隔内最多执行一次，常用于 scroll/mousemove。支持 leading/trailing 控制首尾触发时机。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
类型要点：
- 同样基于泛型 F 推导参数与返回值；
- 内部状态（如上次执行时间、pending 调用）需类型安全；
- 返回函数也应具备 cancel() 方法。
实现示例：
type ThrottledFunction<F extends (...args: any[]) => any> = {
(...args: Parameters<F>): void;
cancel(): void;
};
<p>function throttle<F extends (...args: any[]) => any>(
fn: F,
delay: number,
options: { leading?: boolean; trailing?: boolean } = {}
): ThrottledFunction<F> {
let lastExecTime = 0;
let timer: ReturnType<typeof setTimeout> | null = null;
let pendingArgs: Parameters<F> | null = null;
const { leading = true, trailing = false } = options;</p><p>const throttled = (...args: Parameters<F>): void => {
const now = Date.now();
const remaining = delay - (now - lastExecTime);</p><pre class="brush:php;toolbar:false;">if (leading && !timer && remaining <= 0) {
fn(...args);
lastExecTime = now;
} else if (trailing) {
pendingArgs = args;
if (!timer) {
timer = setTimeout(() => {
if (pendingArgs) {
fn(...pendingArgs);
pendingArgs = null;
lastExecTime = Date.now();
}
timer = null;
}, remaining > 0 ? remaining : delay);
}
}};
throttled.cancel = () => { if (timer) { clearTimeout(timer); timer = null; pendingArgs = null; } };
return throttled; }
✅ 使用示例（类型推导验证）
当你调用时，TypeScript 会自动推导参数和返回值类型：
const handleClick = (id: string, count: number): boolean => {
console.log(id, count);
return true;
};
<p>const debouncedClick = debounce(handleClick, 300);
debouncedClick("user-1", 42); // ✅ 参数类型检查通过
// debouncedClick(123, 42); // ❌ 报错：string expected</p><p>debouncedClick.cancel(); // ✅ 方法可用
debouncedClick.flush(); // ✅ 方法可用✅ 小贴士：生产环境建议用成熟库
虽然手写有助于理解原理，但实际项目中推荐使用经过充分测试的库：
-
lodash-es：提供
debounce和throttle，自带完整类型定义； - use-debounce（React）或 radash：轻量、TS 友好；
- 自己封装时，务必导出类型（如
DebouncedFunction），方便其他模块引用。
不复杂但容易忽略的是：定时器类型、this 绑定（本例未处理，如需保留 this，应使用 fn.apply(this, args) 并将返回函数设为普通函数而非箭头函数）、以及 pending 参数的泛型保存方式。按上述模式扩展即可保障类型安全与运行健壮性。
