>[danger]防抖函数 --- > 计n秒, 时间到了才执行 --- 事件触发, n秒后开始执行代码, 如果n秒内, 事件再次出发, 则n秒重新计时 案例: 鼠标移入切换不同书籍展示 问题: 事件多次触发, 导致异步Ajax多次触发, 多次铺设页面  解决: 事件触发, 1秒后再执行, 如果1秒内, 再次触发, 则重新计时1秒.  >[info] 代码 --- DOM标签里, 绑定方式最终版: ~~~ `<button onmouseover="debounce(btn, 1, ${obj.id})">${obj.catalog}</button>` function debounce(fn, time, ...arg) { if (fn.t !== undefined) clearTimeout(fn.t); // 如果定时器存在, 先清除 fn.t = setTimeout(() => { // 重新开始定时 fn(...arg); // 把多个参数, 拆开传下去, fn相当于btn方法名 }, time * 1000); } ~~~ JS里绑定, 最终版 ~~~ $("#buttonDiv>button").on("mouseover", debounce(btn, 1, 242)); function debounce(fn, time, ...arg) { return function(){ if (fn.t !== undefined) clearTimeout(fn.t); // 如果定时器存在, 先清除 fn.t = setTimeout(() => { // 重新开始定时 fn(...arg); // 把多个参数, 拆开传下去 }, time * 1000); } } ~~~ >[info] 立即执行版 --- ~~~ function debounce(fn, time, ...arg) { if (fn.t === undefined) fn(...arg); // 立即执行版 if (fn.t !== undefined) clearTimeout(fn.t); fn.t = setTimeout(() => { fn(...arg); }, time * 1000); } ~~~ >[warning] 使用场景 --- * 移入/移出 等 事件, 防止多次触发 * onresize / scroll 事件, 防止多次触发 * 文本输入(动态进行Ajax请求), 防止多次触发