JS 中怎么用 TypeScript 编写类型安全的防抖节流函数-js教程-PHP中文网

TypeScript中防抖和节流函数需保留原函数泛型签名，返回带cancel/flush方法的交集类型，定时器用ReturnType，参数与返回值类型严格推导。

js 中怎么用 typescript 编写类型安全的防抖节流函数

在 TypeScript 中编写类型安全的防抖（debounce）和节流（throttle）函数，关键在于保留原函数的参数类型、返回值类型，并正确处理定时器的类型与生命周期。下面给出简洁、可复用、类型完整的实现。

✅ 防抖函数（Debounce）

防抖要求：在最后一次调用后等待指定时间，若期间有新调用则重置计时器。需支持取消（cancel）、立即执行（leading）等行为，同时不丢失泛型信息。

类型要点：
- 使用 泛型 F extends (...args: any[]) => any 捕获原函数签名；
- 返回函数类型与原函数一致（参数、返回值完全兼容）；
- 定时器 ID 类型用 NodeJS.Timeout（Node）或 number（浏览器），推荐统一用 ReturnType 更准确。

实现示例：

function debounce<f extends 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);</f></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 any> any> = {
  (...args: Parameters<f>): void;
  cancel(): void;
  flush(): void;
};
<p>function debounce<f extends any> any>(
fn: F,
delay: number,
options: { leading?: boolean; trailing?: boolean } = {}
): DebouncedFunction<f> { ... }</f></f></p></f></f>

✅ 节流函数（Throttle）

节流要求：固定间隔内最多执行一次，常用于 scroll/mousemove。支持 leading/trailing 控制首尾触发时机。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

类型要点：
- 同样基于泛型 F 推导参数与返回值；
- 内部状态（如上次执行时间、pending 调用）需类型安全；
- 返回函数也应具备 cancel() 方法。

实现示例：

type ThrottledFunction<f extends any> any> = {
  (...args: Parameters<f>): void;
  cancel(): void;
};
<p>function throttle<f extends 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;</f></typeof></f></f></p>
<p>const throttled = (...args: Parameters<f>): void => {
const now = Date.now();
const remaining = delay - (now - lastExecTime);</f></p>
<pre class="brush:php;toolbar:false;">if (leading && !timer && remaining  {
      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();  // ✅ 方法可用</p>