防抖和节流

在开发中我们经常会遇见一些频繁触发的事件，比如resize、scroll、mousemove等。那如果这些事件是复杂的回调函数或是数据请求，连续的被触发之后，浏览器反应不过来，就会出现卡顿的现象，为了解决这个问题，就出现了两种解决方案：防抖（debounce）和 节流（throttle）

防抖（debounce）

原理：触发高频事件后n秒内，函数只会执行一次，如果在一个事件触发的n秒内再次触发这个事件，那会以新的触发时间重新计算。总之，就是在触发完事件的n秒内不再触发事件，才会再执行函数。

实现：

function debounce(fn, wait) {

        var timer = null;

        return function () {

            clearTimeout(timer);

            timer = setTimeout(() => {

                fn.apply(this, arguments);

            }, wait);

        }

    }

若想立即执行并在n秒内取消 debounce 函数的做法（immediate参数判断是否是立刻执行）

function debounce(fn, wait, immediate) {

    var timer, result;

    var debounced = function () {

        if (timer) clearTimeout(timer);

        if (immediate) {

            // 如果已经执行过，不再执行

            var callNow = !timeout;

            timer = setTimeout(() => {

                timer = null;

            }, wait);

            if (callNow) result = func.apply(this, arguments)

        }

        else {

            timer = setTimeout(() => {

                fn.apply(this, arguments);

            }, wait);

        }

        return result;

    };

    debounced.cancel = function() {

        clearTimeout(timer);

        timer = null;

    };

    return debounced;

}

节流（throttle）

原理：持续触发事件，每隔一段时间，只执行一次函数。就是说会稀释函数的执行频率。

实现：关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。

使用时间戳：

function throttle(fn, wait) {

      var previous = 0;

      return function () {

          var now = +new Date();

          if (now - previous > wait) {

              fn.apply(this, arguments);

              previous = now;

          }

      }

  }

使用定时器：当事件触发时，设置一个定时器，再次触发事件时，如果定时器存在，就不执行，直到执行定时器，执行函数，清空定时器。

function throttle(fn, wait) {

    var timer;

    var previous = 0;

    return function() {

        if (!timer) {

            timer = setTimeout(() => {

                timer = null;

                fn.apply(this, arguments)

            }, wait)

        }

    }

}

比较以上两种方法：

时间戳方法事件会立刻执行，定时器方法事件会在 n 秒后第一次执行；

时间戳方法事件停止触发后没有办法再执行事件，定时器方法事件停止触发后依然会再执行一次事件。