1.防抖函数：

防抖函数就是在一定时间内没再触发事件时，执行程序；常用于搜索框搜索功能的优化；避免过于频繁的发送请求；
思路：
1.触发事件，清除延时函数，创建新的延时函数，并计时；
2.如果再次触发事件，执行函数，会clearTimeout移除延迟函数，创建新的延迟函数重新计时；
3.只有在一定时间间隔内没再触发事件，程序便执行；

function debounce(func, delay) {
      var timer = null

      return function() {
        clearTimeout(timer)
        timer = setTimeout(func, delay)
      }
    }

关于this和参数的问题：

this的问题比较容易总结，就是关于this隐式绑定丢失的问题，当实现隐式绑定的函数进行赋值操作时【参数传递属于一种隐式赋值】，就会发生this丢失，比较常见的就是延时函数中的this，它的this指向window；

解决问题的方法：
1.借助ES6的箭头函数，箭头函数会继承外层函数调用的this绑定；
2.使用 var self = this，保留this的绑定；

下面讨论参数的问题

ES5语法：

function foo(a, b) {
      console.log(arguments);//Arguments(2) [22, 33, callee: ƒ, Symbol(Symbol.iterator): ƒ]
      console.log(event);//Event {isTrusted: true, type: "load", target: document, currentTarget: Window, eventPhase: 2, …}
      setTimeout(function() {
        console.log(arguments);//Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
        console.log(event);//undefined
      }, 500)
    }

    // foo(10, 29)
    window.onload = function() {
      foo(22, 33)
    }

事件对象和arguments无法传递给延时函数

处理方法：

function foo(a, b) {
      console.log(arguments);//Arguments(2) [22, 33, callee: ƒ, Symbol(Symbol.iterator): ƒ]
      var _arguments = arguments
      console.log(event);//Event {isTrusted: true, type: "load", target: document, currentTarget: Window, eventPhase: 2, …}
      var _event = event
      setTimeout(function() {
        console.log(_arguments);//Arguments(2) [22, 33, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        console.log(_event);//Event {isTrusted: true, type: "load", target: document, currentTarget: Window, eventPhase: 2, …}
      }, 500)
    }

    // foo(10, 29)
    window.onload = function() {
      foo(22, 33)
    }

最终的基于ES5语法的防抖函数：

// 防抖函数
    function debounce(func, delay) {
      var timer = null

      return function() {
        clearTimeout(timer)
        var _this = this
        var _arguments = arguments
        timer = setTimeout(function() {
          func.apply(_this, _arguments)
        }, delay)
      }
    }

ES6语法

 function bar(c, d) {
      console.log(arguments);//Arguments(2) [22, 33, callee: ƒ, Symbol(Symbol.iterator): ƒ]
      console.log(event);//Event {isTrusted: true, type: "load", target: document, currentTarget: Window, eventPhase: 2, …}
      setTimeout(() => {
        console.log(arguments);//Arguments(2) [22, 33, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        console.log(event);//undefined
      }, 500)
    }

    window.onload = function() {
      bar(22, 33)
    }

处理方法：

 function bar(c, d) {
      console.log(arguments);//Arguments(2) [22, 33, callee: ƒ, Symbol(Symbol.iterator): ƒ]
      console.log(event);//Event {isTrusted: true, type: "load", target: document, currentTarget: Window, eventPhase: 2, …}
      var _event = event;
      setTimeout(() => {
        console.log(arguments);//Arguments(2) [22, 33, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        console.log(_event);//Event {isTrusted: true, type: "load", target: document, currentTarget: Window, eventPhase: 2, …}
      }, 500)
    }

    window.onload = function() {
      bar(22, 33)
    }

最终的基于ES6语法的防抖函数【这里有疑问？？？？？】：

function debounce(func, delay = 0) {
      let timer = null;
      return function (...arg) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, arg)
        }, delay)
      }
    }

2.节流函数

节流就是事件的触发必须在指定时间间隔之上生效，比如，间隔1s,触发后在1s内再次触发是无效的；

ES5实现：

function throttle(func, interval) {
      var last = 0

      return function() {
        var _this = this;
        var _arguments = arguments;

        var now = new Date().getTime();
        if(now - last > interval) {
          func.apply(_this, _arguments)
          last = now
        }
      }
    }

ES6实现：

思路：
1.事件触发，执行函数，在间隔时间到之前，再次触发函数时，timer不为空，因此不会执行if后面的代码；
2.只有在间隔时间到了之后，在回调函数中将timer置空，从而可以实现节流的效果；

function throttle(func, interval) {
      let timer = null;

      return function(...args) {
        if (!timer) {
          timer = setTimeout(() => {
            timer = null;
            func.apply(this, args)
          }, interval)
        }
      }
    }