js-防抖

1. 在浏览器的各种事件中，有一些容易频繁触发的事件，比如scroll、resize、鼠标事件（比如 mousemove、mouseover）、键盘事件（keyup、keydown ）等。频繁触发回调导致大量的计算会引发页面抖动甚至卡顿，影响浏览器性能。防抖和节流就是控制事件触发的频率的两种手段。

   防抖的中心思想是：在某段时间内，不管你触发了多少次回调，我都只执行最后一次。

// fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间
function debounce(fn, delay) {
   
    // 定时器
    let timer = null;
    // 将debounce处理结果当作函数返回
    return function () {
   
        // 保留调用时的this上下文
        let context = this
        // 保留调用时传入的参数
        let args = arguments
        // 每次事件被触发时，都去清除之前的旧定时器
        if(timer) {
   
            clearTimeout(timer)
        }
        // 设立新定时器
        timer = setTimeout(function () {
   
            fn.apply(context, args)
        }, delay)
    }
}
// 用debounce来包装scroll的回调
window.onscroll = debounce(() => {
   
    console.log('触发了滚动事件');
},1000)