【JavaScript】09. 防抖与节流

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

防抖与节流

01.防抖：

• 在事件被触发一定时间后再执行回调函数，即要等待一段时间，这个函数才会被执行

  • 如果在这一段时间内，又触发了事件，则以最后一次触发的事件为准，并重置这个时间段
  • 当过了这个时间段之后，才会触发函数（函数内即我们想要执行的操作）

• 场景理解：

  • 搜索框：在输入关键字后，隔一段时间才会显示相关搜索词，并不是每打一个字就触发一次搜索
  • 进电梯：电梯门关闭需要时间，如果这个时间段有人进来，则电梯门关闭会重新计时

• 代码实现：（简）

  function debounce(time){
      // 1. 创建一个定时器
      let timeout = null
      
      // 2. 返回一个回调函数，回调函数内进行处理
      return function(){
          
          // 3. 如果再次触发事件，且上一次定时器还未清除，则清除定时器
          clearTimeout(timeout)
          
          // 4. 然后重新赋值定时器，在一段时间 time 后，才执行函数
          timeout = setTimeout(()=> {
              
              // 具体操作：这里可以在 debounce 传入一个需要防抖的函数，并放置在这里（这里不演示）
              console.log('防抖执行') 
              
          }, time)
      }
  }
  

• 再理解：

  • 事件被频繁触发的情况下，只有事件触发的间隔时间超过指定的time时间后，才会执行函数
  • 将多次触发执行，变为只触发最后一次执行

02.节流：

• 在一定时间段内，只能触发一次函数，如果多次触发，也只有一次生效，只有过了这个时间间隔之后，才能触发下一次

• 场景理解：

  • 轮播图：点击下一张，在滚动到下一张之前，期间点击按钮无效
  • 验证码：点击获取验证码，在倒计时结束之前，无法点击按钮

• 代码实现：（简）

  function throttle(time) {
      // 1. 创建一个触发标识，true表示以触发，false表示未触发
      // 或者说 节流阀
      let isTrigger = false
      
      return function() {
          // 2. 如果已经触发了，则直接返回
          if (isTrigger) {
              return
          } else {
              // 3. 如果未触发，则接下来执行触发函数
              // 3.1 先改变触发状态
              isTrigger = true
              
              // 3.2 执行操作
              setTimeout(() => {
                  
                  // 具体操作：这里可以在 throttle 传入一个需要节流的函数，并放置在这里（这里不演示）
                  console.log('节流执行')
                  
                  // 注意改变触发标识
                  isTrigger = false
              }, time)
          }
      }
  }
  

• 再理解：

  • 指定时间间隔内只会执行一次任务

03. 总结：

• 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样
  • 函数防抖是某一段时间内只执行一次
  • 函数节流是间隔时间执行

本人前端小菜鸡，如有不对请谅解