防抖函数中应通过闭包捕获参数而非直接使用arguments，因arguments仅在当前函数作用域有效，setTimeout回调中会丢失原始参数；推荐用...args收集并fn.apply(this, args)传递，确保事件对象和this正确。
防抖函数中正确传递事件参数，关键不是直接用 arguments，而是通过闭包捕获调用时的实际参数，并在延迟执行时原样传入。直接在定时器回调里用 arguments 会拿到定时器自身的上下文（通常是 undefined 或全局对象），导致参数丢失或错乱。
为什么不能在 setTimeout 里直接用 arguments
arguments 是函数执行时的局部类数组对象，只在当前函数作用域内有效。一旦进入 setTimeout 的回调函数，就已脱离原始调用上下文，arguments 指向的是回调函数自己的（空或无效）参数。
- 错误写法（参数丢失）：
function debounce(fn, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
fn(arguments); // ❌ 这里的 arguments 不是调用时传入的
}, delay);
};
}
推荐写法：用 rest 参数 + 闭包捕获
使用 ES6 的 ...args 显式收集参数，再通过闭包让定时器回调能访问到它们：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 简洁可靠，兼容事件处理器和普通函数
- 自动处理任意数量、任意类型的参数（包括 event 对象）
- 保持
this指向原调用上下文（用fn.apply(this, args)）
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args); // ✅ 正确传递 this 和所有参数
}, delay);
};
}
实际用于事件监听时的注意事项
绑定到 DOM 事件（如 input、scroll）时，事件对象会自动作为第一个参数传入，无需额外处理：
- 直接使用即可：
debouncedHandler(event) - 如果需要访问
event.target.value等属性，确保事件未被中途取消（防抖本身不阻止事件） - 注意：防抖后事件对象仍有效，但多次触发只保留最后一次的 event
const handleInput = debounce(function(event) {
console.log('输入值：', event.target.value); // ✅ 正常拿到 event
}, 300);
inputEl.addEventListener('input', handleInput);
进阶：支持立即执行 + 取消防抖
若需首次触发立即执行（leading edge），或手动取消待执行任务，可扩展参数：
- 加
immediate标志控制首调时机 - 返回的函数挂载
cancel方法，方便外部清理
function debounce(fn, delay, immediate = false) {
let timer;
const debounced = function(...args) {
const later = () => {
timer = null;
if (!immediate) fn.apply(this, args);
};
const callNow = immediate && !timer;
clearTimeout(timer);
timer = setTimeout(later, delay);
if (callNow) fn.apply(this, args);
};
debounced.cancel = () => {
clearTimeout(timer);
timer = null;
};
return debounced;
}
