防抖函数概念

计n秒, 时间到了才执行

• 事件触发, n秒后开始执行代码, 如果n秒内, 事件再次出发, 则n秒重新计时
  
• 案例: 鼠标频繁触发移入事件
  
• 问题: 事件多次触发, 导致异步Ajax多次触发, 多次铺设页面
  
• 解决: 事件触发, 1秒后再执行, 如果1秒内, 再次触发, 则重新计时1秒.
  

代码

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);
    }
}

立即执行版

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);
}

使用场景

• 移入/移出 等 事件, 防止多次触发
• onresize / scroll 事件, 防止多次触发
• 文本输入(动态进行Ajax请求), 防止多次触发