函数防抖和节流

在网上，关于防抖和节流的实现方式已经不少了，这里也就不在依依列举，只是说说这两种思想方式，要注意，函数防抖和节流只是一种解决问题的设计思想罢了。

思想原因

在浏览器中，频繁的操做 DOM 是很是消耗内存和 CPU 时间，在咱们项目开发过程当中，或多或少会绑定一些持续触发的事件，如 resize，scroll，mousemove 以及移动端 touchmove 等。同一个事件在同一刻产生大量的事件函数，若处理不当，轻则致使浏览器卡顿，重则致使浏览器崩溃，不管出现哪一种状况，都不是咱们所指望的，此时，函数防抖 (debounce) 和节流 (throttle) 的思想应运而生。

函数防抖和节流就是为了处理同一时刻事件的触发频率和事件函数的执行频率这二者关系的。 咱们知道 DOM 事件的触发频率是不可控的，所以咱们只能控制事件函数的执行频率，只要是没有达到条件要求的事件，都不触发事件函数，经过这一手段，能够极大的优化浏览器的性能。

函数防抖

函数防抖是指某事件被频繁的触发，在延迟必定的时间内，若该事件没有继续被触发，则执行事件函数，在整个过程当中，事件函数只会被触发一次。

应用场景：在事件连续触发过程当中，你指望事件函数只执行一次，例如：Ajax实时搜索（keydown）。

举个例子，咱们在浏览页面内容的时候常常会使用到滚动条，若此时咱们绑定了一个滚动条事件，可是，并无加任何的防抖保护，这意味着用户只要触动了滚动条，就会产生成百上千条滚动事件，进而触发成百上千次事件函数，若每条事件函数的时间复杂度为O(n²)，后果可想而知，直接把浏览器搞崩了，这样的产品，还没开始，已经结束了。

此时，若加上防抖，效果就大大的不一样了，咱们虽然没法阻止事件的触发频率，可是能够控制事件函数的执行频率，不管你触发了多少次事件，只要在保护时间内有触发，就不执行事件函数，反之，执行。

没有什么能比图片更形象的了👇

function debounce(func, wait) {
  let timeout = null;
  return function() {
    let _this = this;
    let args = arguments;
    if (timeout) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(() => {
        func.apply(_this, args)
    ), wait)
  }
}
复制代码

防抖的核心就是经过定时器来延迟事件函数的执行，在未达到定时器时间状况下，依旧产生了触发事件，就将上一个定时器删除。

函数节流

函数节流是指某事件被频繁的触发，在事件触发期间，它会周期的执行事件函数。

举个例子，水滴的下落，咱们将水喉拨到一个角度，水滴会周期性一滴一滴的滴落。

应用场景：在事件连续触发过程当中，你指望周期性的间隔必定时间来调用回调函数，例如：计算鼠标移动的距离（mousemove）

function throttle(func, wait) {
  let timer = null;
  return function() {
    let _this = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(_this, args)
        timer = null
      }, delay)
    }
  }
}
复制代码