函数的节流与防抖

概念
函数的节流与防抖是优化JavaScript的高频率执行的一种手段。

1. 节流
   函数的节流应用于一些函数高频率的场景，多数在监听页面元素一直触发的事件。例如高频率触发的滚动事件。
   来看看下面监听滚动事件的例子：

let canRun = true;
document.getElementById('scroll').onscroll = function () {
    if (canRun) return;
    canRun = false;
    setTimeout(function () {
      console.log('do something');
      canRun = true;
    }, 300)
  }

首先定义一个变量（函数运行的开关）；
每次在函数运行的时候检测开关（判断符合运行条件）；
符合条件利用setTimeout运行行数；
最后，等setTimeout里面的方法执行完毕，把执行条件canRun = true，允许下次执行；

2. 防抖
   防抖函数通常运用在表单验证中。在验证的过程中往往是等待用户输入完毕后再进行验证。需要检查格式是否正确。如果不正确在进行错误提示。下面我们还是用滚动的例子来看看：

let timer = false;
document.getElementById('scroll').onscroll = function () {
  clearTimeout(timer);
  timer = setTimeout(function () {
      console.log('do something');
  }, 300)
}

首先先定义一个标记；
在执行函数的过程中，先会清理一遍timer；
然后在定义一个timer；在这里利用setTimeout做一个缓存。
这里巧妙的利用setTimeout做了一个缓存，每次在运行函数的时候都会清理一遍timer，在利用setTimeout做一个函数缓存。避免了函数的多次运行。其实，用队列的方式也可以做到这种效果。这里就不深入了。