Web前端性能提升防抖和节流使用lodash封装好的防抖和节流方法

前端小凯

已于 2022-09-29 16:50:07 修改

阅读量415

点赞数 1

文章标签： javascript 前端 html

于 2022-09-29 16:23:33 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/127109178

版权

防抖：

<!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>防抖</title>
  </head>
  <body>
    <button>防抖</button>
    <script>
      // 获取按钮
      var btn = document.querySelector("button");

      // 给定时器变量赋值null
      var timer = null;

      // 当按钮点击的时候触发事件
      btn.onclick = function () {
        // 防抖 每次先清除一下定时器 防止狂点 定时器叠加
        clearTimeout(timer);

        // 给定时器变量赋值
        timer = setTimeout(function () {
          console.log("防抖了");
        }, 1000);
      };
    </script>
  </body>
</html>

节流：

<!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>节流</title>
  </head>
  <body>
    <button>节流</button>
    <script>
      // 获取按钮
      var btn = document.querySelector("button");

      // 设置节流开关
      var flg = true;

      // 当按钮点击的时候触发事件
      btn.onclick = function () {
        // 判断节流开关是否为true 是否为打开状态
        if (flg) {
          // 如果是打开 先给关闭 false
          flg = false;

          // 执行一次函数体
          console.log("节流了");

          // 使用定时器控制节流的开关的打开与关闭
          setTimeout(function () {
            flg = true;
          }, 1000);
        }
      };
    </script>
  </body>
</html>

lodash封装好的防抖和节流方法：

防抖：_.debounce( )

节流：_.throttle( )

<!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>lodash防抖节流</title>
  </head>
  <body>
    <button>防抖</button>
    <button>节流</button>
    <!-- 引入lodash防抖节流框架 -->
    <script src="./lib/lodash.js"></script>
    <script>
      // 获取两个按钮
      var btns = document.querySelectorAll("button");

      // _.debounce(函数,事件) 防抖
      //   function fn() {
      //     console.log("防抖了");
      //   }
      //   btns[0].onclick = _.debounce(fn, 1000);
      btns[0].onclick = _.debounce(function () {
        console.log("防抖了");
      }, 1000);

      // _.throttle(函数,事件) 节流
      //   function fn() {
      //     console.log("节流了");
      //   }
      //   btns[1].onclick = _.throttle(fn, 1000);
      btns[1].onclick = _.throttle(function () {
        console.log("节流了");
      }, 1000);
    </script>
  </body>
</html>