JavaScript中的去抖

背景

设想，我们直接地将一些事件处理程序绑定在诸如resize、scroll这样的事件上。可想而知的是，无论我们多么的小心，在改变窗口大小或者滚动时，事件会以一个高频率触发。要是监听这样的事件进行dom操作，那么势必会引起性能的高消耗。而且，问题是，我们往往也并不需要这样的事件一直高频率触发。
函数去抖应运而生。

去抖 debounce

简单来说的意思就是，使函数的调用延迟一段时间执行，在这段时间内如果又发生调用则重置延迟的时间。也就是说，一段时间过去后，只会发生一次调用。

去抖的实现和例子

function debounce(fn, delay) {
        var timer = null;
        // 返回一个包装后的函数
        return function () {
            // 保存this的指向，args即函数的参数
            var context = this,
                args = arguments;
            // 清除定时器，这个是这个去抖实现的核心
            clearTimeout(timer);
            // 设置定时器，delay即是延迟
            timer = setTimeout(function () {
                fn.apply(context, args);
            }, delay);
        };
    }
    function print(){
        console.log(1);
    }
    debounce(print,5)
    var a = debounce()
    // 把经过去抖函数包装后的函数绑定到事件上
    window.addEventListener('scroll', debounce(print,1000))