前言

在笔者之前的面试中，基本上每次都会被问到防抖和节流是什么意思，讲道理虽然对这个概念大致有一些理解，但是一直都有点模模糊糊的，所以在这里记录一下，以便回顾

防抖

概念：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
顾名思义，防抖就是防止抖动，简单的解释就是说任务执行的唯一性，就是说在一个任务执行之前，无论你下达多少次的命令，任务都只会执行一次，最比较常见的就是延时任务防抖实现，请看下面的示例

var time = null;
function handleClick() {//执行任务的函数
   if(time != null) {
      clearTimeout(time);
      time = null;
    }
   time = setTimeout(() => {
      //这里执行一个任务
  },3000)
}

<button onclick="handleClick()">执行任务</buton>

//每次点击执行任务按钮之后，都会把之前的计时器清空，里面的任务也就不会执行，然后重新去建立一个任务，也就是任务的唯一实现

节流

概念：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
顾名思义，节流就是节约开支，简单的解释就是说在一定的时间内，无论我们怎么发布任务，任务也只会执行一次，当然，这个条件维度不一定是时间，也可以是其他的，比如滚动触发事件（只有滚动的距离达到一定的长度才会触发），请看示例

var time = null;
function handleClick() {//执行任务的函数
   if(time != null) { return }
   time = setTimeout(() => {
      //这里执行一个任务
      clearTimeout(time);
      time = null;
  },3000)
}

<button onclick="handleClick()">执行任务</buton>

总结：其实防抖和节流的区别就是维度不一样，一个是以执行次数为条件，一个是以时间间隔为条件，当然了，他们存在的目的都是为了提高我们的程序性能