防抖和节流的区别和应用场景

最新推荐文章于 2025-01-08 14:01:26 发布

前端小菜渣渣徐

最新推荐文章于 2025-01-08 14:01:26 发布

阅读量366

点赞数 1

文章标签： javascript 前端性能优化

本文链接：https://blog.youkuaiyun.com/HOMEXS/article/details/126808766

版权

**函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。**比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

防抖应用场景：最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确

**函数节流是指一定时间内js方法只跑一次。**比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释

节流应用场景：多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。

代码实现关键点

涉及闭包，timer，timeOut是在闭包内不会销毁
使用了高阶函数（函数返回值是一个函数，参数也是一个函数）
事件绑定的是高阶函数返回值
使用定时器和销毁定时器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <button id="btn1">防抖点击一下</button>
    <button id="btn2">节流点击一下</button>
    <script>
      document.getElementById('btn1').addEventListener('click',fun(back,2000))
      function fun(bc,time){
        let timer
        return function(){
          clearTimeout(timer)
          timer = setTimeout(()=>{
            bc()
          },time)
        }
      }
      function back(){
        console.log("我触发了防抖");
      }
    </script>
    <script>
      document.getElementById('btn2').addEventListener('click',fun(back,2000))
      function fun(bc,time){
        let timeOut = true
        return function(){
          if(timeOut){
            timeOut = false
            bc()
            setTimeout(()=>{
              timeOut = true
            },time)
          }
        }
      }
      function back(){
        console.log("我触发了节流");
      }
    </script>
  </body>
</html>