js高阶函数应用—函数防抖和节流

高阶函数指的是至少知足下列两个条件之一的函数：

1. 函数能够做为参数被传递；
2.函数能够做为返回值输出；

javaScript中的函数显然具有高级函数的特征，这使得函数运用更灵活，做为学习js一定会接触到的闭包也能够经过高阶函数构建，固然本文不打算介绍闭包，咱们今天的主题是函数防抖和节流。

首先咱们来简单看一下什么是函数防抖和节流，咱们开发过程当中常常常会用到一些dom事件，好比mouseover、keydown/keyup、input（处理中文输入还可能用到compositionstart/compositionend）、scroll和resize之类的事件，固然这些事件应用场景也很常见：

1.如实现一些拖拽功能（不用 H5 Drag&Drop API）和鼠标移动须要触发一些特殊需求的js操做会用mouseover;

2.处理输入时候可能不少校验，联想之类的可能会用到keydown/keyup、input

3.一些射击类游戏的点击可能会用到keydown/keyup

4.resize和scroll这两个不用我多说了，滚动和窗口大小监听

以上这些事件都有一个共同特色就是用户的操做会触发N屡次事件，好比最典型的scroll事件，滚动页面会屡次重复触发，致使不少咱们写的回调函数被不停的往js的事件队列里添加，重复执行不少次回调里的逻辑（若是你的回调里还有不少操做DOM的逻辑那么页面可能会卡顿）。这些并非咱们但愿的，因此咱们得采起必定的措施控制这种状况：

1.减小事件触发的次数

2.减小回调的执行次数

显然第一条减小事件触发做为写前端的咱们应该是作不到的，因此解决方案就是减小回调的执行，由于咱们能控制是否往事件循环队列里添加回调函数和以什么频率去添加，

故而咱们要作的事让回调函数不要执行得太频繁，减小一些过快的调用以固定频率（这个频率咱们能够控制）触发来节流，或者让短期内重复触发的事件回调在事件中止触发的必定时间后（这个时间咱们能够控制）只执行一次回调函数。

好了，简单的介绍了节流和防抖以后咱们开始来写代码演示一下，首先咱们先介绍函数防抖，由于防抖比节流更容易理解一些。

咱们如今打开控制台给当前页面绑定一个scroll事件：

function test() {

console.log('test')

}

window.addEventListener('scroll', test)

而后吧页面滚到底发现控制台打印了不少个"test"，若是咱们只但愿页面滚到底才触发一些操做，那么咱们只须要在最后只执行一次回调，这就须要防抖函数来实现，咱们这里来一个简化版本，其实这就是防抖的核心代码，只要理解这点其余的是复杂实现不过都是考虑更多的场景而已（《js高程》中说是节流，实则为防抖）

        function debounce(method, context, time) {
            clearTimeout(method.timeoutId);
            method.timeoutId = setTimeout(() => {
                method.apply(context,arguments);
            }, time);
        }

咱们再来试验一下：

        function test() {
            console.log('test')
        }
        window.addEventListener('scroll', function() {
                debounce(test, null, 200);
        })

这里只要滚动事件的触发频率大于200ms就一直不会被执行，只有最后执行一次，若是你在写的页面测试，可能会在一开始执行了一次test由于刷新页面触发了scroll。

这里给出underscore里的防抖函数的实现(加粗地方对应上边介绍的核心代码逻辑)：

  // Returns a function, that, as long as it continues to be invoked, will not
  // be triggered. The function will be called after it stops being called for
  // N milliseconds. If `immediate` is passed, trigger the function on the
  // leading edge, instead of the trailing.
  _.debounce = function(func, wait, immediate) {
    var timeout, result;

    var later = function(context, args) {
      timeout = null;
      if (args) result = func.apply(context, args);
    };

    var debounced = restArgs(function(args) {
      if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; timeout = setTimeout(later, wait); if (callNow) result = func.apply(this, args); } else { timeout = _.delay(later, wait, this, args); } return result;
    });

    debounced.cancel = function() {
      clearTimeout(timeout);
      timeout = null;
    };

    return debounced;
  };

接下来咱们说一说节流函数，在开始这以前咱们先来个简单的代码：

       
        console.time('test throttle');
        for (let i = 0; i < 5000; i++) {
            test();
        }
        console.timeEnd('test throttle');

执行代码后我这里基本是在1.9s内打印了5000个“test”字符串，就是在很短期内调用了5000次，这5000次调用咱们但愿每隔10ms的函数才被执行,

这里咱们先来实现一个简单版本的节流函数：

        var throttle = (function() {
            var last = 0;
            return function(method, context, time) {
                var current = +new Date();
                if (current - last > time) {
                    method.apply(context, arguments);
                    last = current;
                }
            }
        })();

　　　　　　for (let i = 0; i < 50000; i++) {

　　　　　　　　throttle(test, null, 10);

　　　　　　}

再次执行咱们能够获得：

调用共用了138ms（时间比前边少不少，这是由于咱们前边实际都执行了打印的操做），而这里throttle函数知识把test()函数放进js函数执行队列，并无执行打印，因此执行时间要少不少，不过咱们仍是获得了咱们指望的效果：函数在屡次调用的时候咱们指望固定频率执行函数，而忽略其余函数不执行。

这里咱们一样给出underscore里的节流函数版本：

 // Returns a function, that, when invoked, will only be triggered at most once
  // during a given window of time. Normally, the throttled function will run
  // as much as it can, without ever going more than once per `wait` duration;
  // but if you'd like to disable the execution on the leading edge, pass
  // `{leading: false}`. To disable execution on the trailing edge, ditto.
  _.throttle = function(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function() {
      previous = options.leading === false ? 0 : _.now();
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };

    var throttled = function() {
      var now = _.now();
      if (!previous && options.leading === false) previous = now;
      var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        timeout = setTimeout(later, remaining);
      }
      return result;
    };

    throttled.cancel = function() {
      clearTimeout(timeout);
      previous = 0;
      timeout = context = args = null;
    };

    return throttled;
  };