函数的节流与防抖

概念

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

节流

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

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

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

防抖

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

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

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