防抖和节流

最新推荐文章于 2024-09-22 20:39:15 发布

qiansli12138

最新推荐文章于 2024-09-22 20:39:15 发布

阅读量1.3k

点赞数

文章标签：防抖节流前端开发性能优化 JavaScript

本文链接：https://blog.csdn.net/qq_36546490/article/details/124403896

版权

今天工作中突然用到了这个知识点，就记录一下。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
      #box {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box">
      22232
    </div>
    <!-- 女<input type="radio" name="2" id="clickRadio" value="" /> -->
       <!-- 防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。 -->
      <script type="text/javascript">
        // 防抖 : 防抖就是当持续触发事件时，保证只执行最后一次事件处理函数
        function debounce (fn) {
          var timer = null
          return function (){
            clearTimeout(timer) // 每点击一次就吧前一个定时器删除掉 相当于把上次的事件清除了
            timer = setTimeout(() => {
              fn()
            },1000)
          }
        }
        function sayHi () {
          console.log("触发了抖动的最后一次")
        }
        let box = document.querySelector("#box")
        box.addEventListener("click", debounce(sayHi))
        // 节流： 当持续触发事件时，保证一定时间段内只调用一次事件处理函数
        function throttle (fn) {
          var flag = true
          return function () {
            if (!flag) return // flag为false就不往下走了
            flag = false // 立即吧flag设置为false
            setTimeout(() => {
              fn()
              flag = true // 当用户处理程序成功之后再将flag赋值为TRUE，可以再次进行点击的操作
            },1000)
          } 
        }
        function flagFunction (){
          console.log("777")
        }
        //let box = document.querySelector("#box")
        //box.addEventListener("click", throttle(flagFunction))
        
      </script>
  </body>
</html>

总结：防抖：在单位时间内，只执行最后一次的点击事件；

节流：在单位时间内，多次的点击事件，执行完成才会执行下一个操作。