防抖与节流的简单理解

但当涉猎

已于 2022-09-06 16:47:01 修改

阅读量582

点赞数

于 2022-09-06 16:15:11 首次发布

本文链接：https://blog.csdn.net/LK_315/article/details/126726604

版权

防抖（debounce）与节流（throttle）的概念在一开始很容易混淆，但其实只要认真理解了就不是很难区分。

打个通俗的比喻，防抖相当于回城，每次被打断，就需要重新执行回城的操作，只有真正不受干扰时才能完成回城；而节流相当于技能冷却，在施放了一次技能操作后，只有等到规定时间后才能施放下一次技能，这期间就是键盘或鼠标按烂了也无法施放技能，即施放技能的频率是定死的。

我们可以通过防抖节流的简单例子-----按键防抖与节流来帮助理解其概念

目标：主要实现每次鼠标点击触发计数增加的对应防抖和节流效果

1.页面结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <button class="btn1">防抖请求+1</button>
    <button class="btn2" style="margin-left: 10px;">节流请求+1</button>
<script>
      const btn1 = document.querySelector('.btn1')
      const btn2 = document.querySelector('.btn2')
      let a = 0,b = 0
</script>
</body>
</html>

2.防抖代码

    // 防抖方法
      function debounce(func,delay){
        let timer = null
        return function(...args){
          // 事件再次触发就清除定时器,打断函数执行
          clearTimeout(timer)
          timer = setTimeout(()=>{
            func.apply(this,args)
          },delay)
        }
      }

3.节流代码

      // 节流方法一
      function throttle(func,delay){
        // 设置节流阀
        let flag = true
        return function(...args){
          if(flag){
           // 关闭节流阀
            flag = false
            // 执行函数
            func.apply(this,args)
            setTimeout(()=>{
              // 定时时间结束就打开节流阀
              flag = true
            },delay)
          }
        }
      }
      // 节流方法二
       function throttle(func,delay){
       // 设置节流阀
         let timer = null
          return function(...args){
       // 只要定时器在执行就关闭节流阀，退出函数执行
            if(timer) return
            timer = setTimeout(()=>{
               func.apply(this,args)
       // 等定时时间结束就再次清空定时器，打开节流阀
                timer = null
             },delay)
          
         }
       }

4.执行函数

      function addA(){
          a++
          console.log('防抖请求计数值为',a);
      }
      function addB(){
          b++
          console.log('节流请求计数值为',b);
      }

5.代码总览

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <button class="btn1">防抖请求+1</button>
    <button class="btn2" style="margin-left: 10px;">节流请求+1</button>
    <script>
      const btn1 = document.querySelector('.btn1')
      const btn2 = document.querySelector('.btn2')
      let a = 0,b = 0
      btn1.addEventListener('click',debounce(addA,1000))
      btn2.addEventListener('click',throttle(addB,1000))

    // 防抖方法
      function debounce(func,delay){
        let timer = null
        return function(...args){
          // 事件再次触发就清除定时器,打断函数执行
          clearTimeout(timer)
          timer = setTimeout(()=>{
            func.apply(this,args)
          },delay)
        }
      }
      // 节流方法一
      function throttle(func,delay){
        // 设置节流阀
        let flag = true
        return function(...args){
          if(flag){
           // 关闭节流阀
            flag = false
            // 执行函数
            func.apply(this,args)
            setTimeout(()=>{
              // 定时时间结束就打开节流阀
              flag = true
            },delay)
          }
        }
      }
      // 节流方法二
      // function throttle(func,delay){
      // 设置节流阀
      //   let timer = null
      //   return function(...args){
      //  只要定时器在执行就关闭节流阀，退出函数执行
      //     if(timer) return
      //      timer = setTimeout(()=>{
      //         func.apply(this,args)
      // 等定时时间结束就再次清空定时器，打开节流阀
      //          timer = null
      //       },delay)
          
      //   }
      // }
      function addA(){
          a++
          console.log('防抖请求计数值为',a);
      }
      function addB(){
          b++
          console.log('节流请求计数值为',b);
      }
    </script>
</body>
</html>

6.实现效果

（1）防抖按键：无论鼠标点的多快，只有在点击停下间隔一秒后，才能正常输出递增的数值，否则都不会执行递增和输出操作。

（2）节流按键：无论鼠标点的多快，都会以固定的频率输出递增的数值，输出间隔时间就是给节流函数设置的延时时间，这里设置的是一秒。