防抖和节流

==很多人不太理解防抖和节流函数的功能，看了这篇文章，保证你会明白他们的用处和区别 。

==## 防抖函数功能：

在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。

比如一个搜索框，应用防抖函数后，当用户不断输入内容时，不会发送请求。只有当用户一段时间T内不输入内容了，才会发送一次请求。如果小于这段时间T继续输入内容的话，就会重新计算时间T，也不会发送请求。这样降低了发送请求的次数，提高性能的同时也提升了用户体验。

写一个防抖函数

//写一个循环，调用debounce函数十次。其中timer为全局变量`
for (let i = 0; i < 10; i++) {  
  this.debounce(() => {  
    console.log(i);  
  })();  
}
debounce(func, wait = 50) {  
  // 返回的函数是每次用户实际调用的防抖函数  
  return (...args) => {  
    // 如果已经设定过定时器了就清空上一次的定时器  
    if (this.timer) clearTimeout(this.timer);  
    // 开始一个新的定时器，延迟执行用户传入的方法  
    this.timer = setTimeout(() => {  
      func.apply(this, args);  
    }, wait);  
  };  
},

运行后，结果如下：

上例所示，输出结果为9.其中的timer是i=1时赋值的，回调函数是i=9时执行的。因为此时只有一个setTimeout异步函数在队列中，等待所有同步事件执行完成后，就开始执行此宏任务。

节流函数功能：

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

写一个节流函数并且调用执行如下：
`for (let i = 0; i < 10; i++) {  
  this.throttle(() => {  
    console.log(i);  
  })();  
}
throttle(func, wait = 1000) {  
  // 返回的函数是每次用户实际调用的节流函数  
  return (...args) => {  
    // 获取当前时间,并转化为number  
    let now = +new Date();  
    // 将当前时间和上一次执行函数时间对比  
    // 如果差值大于设置的等待时间就执行函数  
    if (now - this.lastTime > wait) {  
      // 重置上一次执行该函数的时间  
      this.lastTime = now;  
      func.apply(this, args);  
    }  
  };  
},

运行后，结果如下：

如上图所示，输出结果为0。在1000ms内触发10次函数，只有第一次生效。

总结如下：

防抖和节流区别，以例子为说明（上方输入框，下方显示区）：

防抖：不断输入内容时，下方显示区不会更新**。只有在1s内不输入内容了，下方显示区才会更新内容。

节流：不断输入内容时，每隔500ms，下方显示区才会更新一次内容。