函数的防抖和节流

我们知道，在一个高频触发的监听事件中，会不断触发所绑定的方法，如onscroll、onmouseover、onkeyup等，在你连续触发该事件，就会不断执行绑定方法。也许你绑定的事件不复杂，加上浏览器性能处理越来越好，你会觉得这没什么，但是，如果绑定的方法执行的内容比较复杂，涉及DOM重排重绘严重或者请求频繁，那么如此高频触发，必将带来性能和交互的严重不友好。

为了解决出现这种情况，防抖和节流，这两种方案为此诞生。

它们都是有一个时间规定，在这个规定下限制某个方法的执行时机。

它们有个共同点，就是指定时间内，只能执行一次。https://www.lodashjs.com/docs/lodash.debounce

防抖：

指定时间内，方法只能执行一次。而这个时间的计算，是从最后一次触发监听事件开始算起。一般表现为，在一段连续触发的事件中，最终会转化为一次方法执行，就像防止抖动一样，你做一个事，防止你手抖不小心重复干了

原理：在每次函数执行之前先清空上一次设置的定时器，原因是：如果执行间隔大于n秒，那么先前的定时任务一定已经执行完毕，当执行clearTimeout时其实并没有定时器可清除；否则定时器就会被清除，然后重新计时
思路：
每次触发事件时都取消之前的延时调用方法

  function debounce(fun, delay) {
        var timeout;
        return function() {
          let that = this;
          console.log('arguments', arguments);
          clearTimeout(timeout);
          let args = arguments;
          timeout = setTimeout(function() {
            console.log('----', that);
            fun.call(that, ...args); 
//是函数的this指定input,  fn()的this是window
//在setTimeout里面执行的函数都会在全局作用域执行所以this会指向window，
//但是fn执行时this指向的上下文环境应该是当前执行的函数，所以要用apply来绑定fn的this指定到当前
          }, delay);
        };
      }

      let inputb = document.getElementById('debounce');

      let debounceAjax = debounce(ajax, 2000);

      inputb.addEventListener('keyup', function(e) {
        debounceAjax.call(this, e.target.value);//是函数的this指定input
        // debounceAjax(e.target.value);
      });

节流：

指定时间内，方法只能执行一次。而这个时间的计算，是从上次执行方法开始算起。一般表现为，在一段连续触发的事件中，根据你设定的时间间隔，降低触发频率，重复执行

思路：
每次触发事件时都判断当前是否有等待执行的延时函数
原理：在每次函数执行之前先判断是否存在定时器，存在则跳过本次执行，否则设置新的定时器

function throttle(fun, delay) {
        let last, deferTimer;
        return function(args) {
          let that = this;
          let now = +new Date();

          if (last && now < last + delay) {
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function() {
              last = now;
              fun.apply(that, arguments);
            }, delay);
          } else {
            last = now;
            fun.apply(that, arguments);
          }
        };
      }

      let throttleAjax = throttle(ajax, 1000);

      let inputc = document.getElementById('throttle');
      inputc.addEventListener('keyup', function(e) {
        throttleAjax(e.target.value);
      });