用Map实现多ID防抖/节流：以ID为键、定时器ID或状态对象为值，避免覆盖；Map支持任意类型键、语义化API、遍历清空，优于普通对象。
在前端实现防抖（debounce）或节流（throttle）时，若需同时处理多个不同 ID 的任务（比如多个搜索框、多个按钮点击、多个滚动区域），直接用单个全局定时器会互相覆盖。这时用 Map 是最自然的解法：以 ID 为键，定时器 ID（即 setTimeout 返回的数字）为值，实现“每个 ID 独立维护自己的定时器”。
为什么用 Map 而不是普通对象？
Map 更适合动态键名场景：
- 键可以是任意类型（字符串、数字、Symbol、甚至对象），而对象键会被自动转成字符串，容易冲突（比如
{'1': 'a', 1: 'b'}实际只有1一个键）； - Map 天然支持
.has()、.get()、.delete()，语义清晰，避免obj[id] !== undefined这类易错判断； - Map 可遍历、可清空，便于调试或批量清理（如组件卸载时统一清除所有定时器）。
防抖函数中用 Map 维护多 ID 定时器
核心逻辑：每次触发时，先查 Map 中该 ID 是否已有定时器，有则清除，再新建并存入。
const debounceMap = new Map();
<p>function debounce(id, fn, delay) {
// 清除已存在的定时器
if (debounceMap.has(id)) {
clearTimeout(debounceMap.get(id));
}</p><p>// 设置新定时器，并存入 Map
const timerId = setTimeout(() => {
fn();
debounceMap.delete(id); // 执行完自动清理，节省内存
}, delay);</p><p>debounceMap.set(id, timerId);
}</p><p>// 使用示例：两个输入框独立防抖
inputA.addEventListener('input', () => debounce('search-a', () => fetchSearch('a'), 300));
inputB.addEventListener('input', () => debounce('search-b', () => fetchSearch('b'), 300));
节流函数中用 Map 控制各 ID 的执行节奏
节流需记录上一次执行时间，Map 同样用来存每个 ID 的最后执行时间戳（或定时器状态）：
立即学习“Java免费学习笔记（深入）”；
const throttleMap = new Map(); // 存 { id → { lastTime, timerId } }
<p>function throttle(id, fn, delay) {
const now = Date.now();
const entry = throttleMap.get(id) || { lastTime: 0, timerId: null };</p><p>if (now - entry.lastTime >= delay) {
fn();
entry.lastTime = now;
throttleMap.set(id, entry);
} else if (!entry.timerId) {
// 尚未设置延迟执行，补一个“兜底执行”
entry.timerId = setTimeout(() => {
fn();
entry.lastTime = Date.now();
entry.timerId = null;
throttleMap.set(id, entry);
}, delay - (now - entry.lastTime));
}
}
更稳妥的做法是用 Map 存定时器 ID，配合时间戳判断，避免重复设时器。实际项目中也可封装成类，统一管理生命周期。
关键注意事项
-
务必清理定时器：组件销毁、ID 不再使用时，调用
map.delete(id)或map.clear()，防止内存泄漏； -
ID 命名要有业务意义且唯一，例如
`${userId}-scroll`、`${formId}-submit`； -
避免闭包陷阱：确保传入的
fn是稳定引用，或在需要时用useCallback（React）缓存； - 如果需取消某次防抖，可暴露一个
cancel(id)方法：clearTimeout(map.get(id)) && map.delete(id)。
