js防抖与节流

在前端开发中会遇到一些频繁的事件触发，例如input，keyup，keydown，scroll，resize，mousemove等，这非常影响性能，所以我们需要控制它们触发的频率，方法就是防抖与节流。

• 防抖
  防抖的原理就是：要等你触发完事件 n 秒内不再触发事件，我才执行。

    function debounce(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            clearTimeout(timeout)
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait);
        }
    }
  

• 节流
  节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。
  有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。
  • 定时器实现
    特点：会在 n 秒后第一次执行，事件停止触发后依然会再执行一次事件

    function throttle(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            if (!timeout) {
                timeout = setTimeout(function () {
                    func.apply(context, args)
                    timeout = null;
                }, wait)
            }
        }
    }
  

  • 时间戳实现
    特点：第一次事件会立刻执行，停止触发后没有办法再执行事件

    function throttle(func, wait) {
        var previous = 0;
        return function () {
            var now = Date.now();
            var context = this;
            var args = arguments;
            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }
    }
  

• 参考
  JavaScript专题之跟着underscore学节流
  JavaScript专题之跟着underscore学防抖