持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

写在前面

想起之前在工作中，某位前辈看了下我的项目演示，摇了摇头，说触发太频繁会出问题，让我给按钮加个防抖，我点了点头，根据业务逻辑，加了个控制触发频率的机制，也就是每 1s 只能触发一次那个开关。等到后来我回想起来，那叫防抖吗？？？？确定那不是节流。。。。趁着最近刚好在整理面试相关的题目，给大家简单分享一下防抖和节流~~

防抖与节流

防抖

顾名思义，防止抖动，主要实现的目的是将连续多次的触发变成最后一次，忽略前面所有的触发

代码演示

var timer = null
function toggle(){
  timer && clearTimeout(timer)
  timer = setTimeout(() => {
   // 执行目的函数
  }, delay);
}

应用场景

在实际应用中，我们最常使用防抖的应该是搜索框，现在搜索框一般都具有一个功能，只要我输入内容，便会自动执行搜索，但是如果我一改变搜索框的内容，就立刻执行搜索函数，那么就会出现一个问题，我每输入一个字，搜索框就执行搜索函数，当我输入一句话的期间，搜索框发起了数十次搜索，这完全是不可接受的，这样的执行方式，对性能具有非常大的影响，因此，我们只需要在停止输入后（搜索框内容变化后的 1s）执行搜索函数即可

<body>
  搜索框<input type="text" id="input">
  <script>
    var input = document.getElementById('input')
    var timer = null
    function search(){
      timer && clearTimeout(timer)
      timer = setTimeout(() => {
        alert('发起搜索')
      }, 1000);
    }
    input.addEventListener('keyup', search)
  </script>
</body>

GIF 2022-6-3 13-52-29.gif

节流

节流，即减少“流量”，按照规定的节奏进行，也就是说程序规定了最快只能 2s 切换一次，那么就算你不停触发切换函数，也只能够2s切换一次

代码演示

// 标记是否上锁
var isLock = false
function toggle(){
  // 如果在锁定时间内，直接不执行，退出函数
  if(isLock) return
  // 执行目的函数
  // 加锁，delay 后打开
  isLock = true
  setTimeout(() => {
    isLock = false 
  }, delay);
}

应用场景

在项目中，如果一个按钮作为开关，那么我们肯定不希望它被频繁切换，尤其是有一些使用者会频繁点击，导致引发 bug，那么我们总不可能去控制每个使用者，让他们不要连续点击吧，所以最终还是我们程序员扛下了所有，我们通过节流的方式，使得按钮在第一次触发后的 2s 内无法再次触发，这样就能够有效规避连续点击带来的隐患了

<body>
  <button id="btn">关</button>
  <script>
    var btn = document.getElementById('btn')
    var isLock = false
    function toggle(){
      if(isLock) return

      // 执行的函数
      var text = btn.innerText
      btn.innerText = text === '开' ? '关' : '开'
      // 执行的函数
      
      isLock = true
      setTimeout(() => {
        isLock = false 
      }, 2000);
    }
    btn.addEventListener('click', toggle)
  </script>
</body>

GIF 2022-6-3 14-56-36.gif

防抖与节流的区别

举个生活中的例子，帮助我们记忆一下。我们都知道现在很多相机都有防抖的功能，那么防抖，主要是为了拍出稳定的照片，我们可以想象一下，拍照前我们手一直在抖动（连续触发），等到抖动结束后我们再进行拍照（执行函数），就达到了我们想要的效果（只在最后一次才执行函数）。而节流可以想象一下公交车，我们通过固定公交车的频率，来达到代替私家车，控制马路上车流量（节流）的效果
总结一句话就是：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行