防抖与节流

最新推荐文章于 2025-03-27 22:50:01 发布

一条小胖鱼

最新推荐文章于 2025-03-27 22:50:01 发布

阅读量93

点赞数

文章标签： js

本文链接：https://blog.youkuaiyun.com/washyoursleep/article/details/118553999

版权

1.防抖
1.1场景

有些事件是会频繁触发：keyup,scroll,resize,mousemove.
我们不想让它频繁触发：只需要在最后一次事件做操作即可。
比如：搜索框
实现步骤：在事件产生时,取消上一次的定时器，开启新的定时器。
2.节流
2.1场景
1.有些事件是会频繁触发：keyup,scroll,resize,mousemove.
2.我们依然不想让它怕频发触发，只不过不要那么频繁的触发而已
3.实现步骤：在事件产生时，判断节流阀，如果节流阀成立，立刻及将节流阀设置为不成立，做正常的代码执行顺序，开启新的定时器，定时器结束时重置节流阀。
3.节流和防抖的区别
防抖：一段时间内，只有最后一次产生效果。不在意过程。
节流：一段时间内可能产生多次效果，只不过每一次之间的频率降低了。在意过程。
4.代码演示
防抖

 <body>
  <button>点我试试</button>
  <script>
    var btn = document.querySelector('button')
    var timer = null
    btn.onclick = function () {
      clearTimeout(timer)

      timer = setTimeout(()=>{
        console.log('发送请求了...')
      }, 1000)
    }
  // 快速点击按钮, 你会发现, 无论你点的有多快, 只要点了一次, 日志就打印一次
  // 需求: 在快速点击的过程中, 如何只让最后一次能产生效果
  </script>
</body>

节流

<body>
  <button>点我试试</button>
  <script>
    var btn = document.querySelector('button')
    var flag = true
    btn.onclick = function () {
      if(flag) {
        flag = false
        console.log('发送请求...')

        setTimeout(()=>{
          flag = true
        }, 1000)
      }
    }
  // 快速点击按钮, 你会发现, 无论你点的有多快, 只要点了一次, 日志就打印一次
  // 需求:在快速点击的过程中, 如何降低一下日志打印的频率, 比如1s内最多执行一回
  </script>
</body>