JS 防抖和节流以及使用lodash库完成防抖和节流

最新推荐文章于 2024-06-05 20:00:00 发布

stephen Curry_

最新推荐文章于 2024-06-05 20:00:00 发布

阅读量1.3k

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_65544665/article/details/127146200

版权

为什么需要防抖和节流？

都是为了提高项目的性能。

文章目录

前言
一、什么是防抖？
二、什么是节流？
三、防抖和节流的区别
四、使用lodash库完成防抖和节流

一、什么是防抖？

防抖：

连着点了好多次，我们想要点击停止后间隔一定的时间执行一次

一些频繁触发的事件，我们不想让它频繁执行，比如 keyup scroll resize mousemove

不想让它如此频繁，执行停止后间隔一定的时间执行就用防抖

应用场景：比如搜索框联想

防抖代码如下：

<!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>防抖</button>
  </body>
</html>
<script>
  // debounce
  // 防抖  不论点击多少次（事件触发多少次） 以最后一次为准
  //      登陆 注册  按钮
  var btn = document.querySelector("button");
  var timer = null;
  btn.onclick = function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
      console.log("点击了，不防抖");
    }, 1000);
  };
</script>

二、什么是节流?

节流

不论执行的频率有多高，我们总是让间隔一定的时间执行一次

一些频繁触发的事件，我们想让它频繁执行，但不想那么的频繁，节制一点

比如 keyup scroll resize mousemove

不想让它如此频繁，执行停止后间隔一定的时间执行就用防抖

应用场景：比如拖拽内容

节流代码如下：

<!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>节流</button>
  </body>
</html>
<script>
  // 对于一些频繁触发的事件
  // 想让该事件继续触发 但是不希望那么的频繁
  // 人为的控制 间隔一定的时间执行
  var btn = document.querySelector("button");
  var flg = true; //节流阀  开关
  btn.onclick = function () {
    if (flg) {
      flg = false;
      console.log("节流执行了");
      setTimeout(function () {
        flg = true;
      }, 1000);
    }
  };
</script>

三、防抖和节流的区别

区别：

防抖：不论执行多少次，我们只让最后一次执行

节流：一段时间内，可以执行多次效果，但是我们人为的降低了执行的频率

四、引入lodash库完成防抖和节流

1.引入库

https://www.lodashjs.com/

2.代码示例

<!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>防抖</button>
    <button>节流</button>
  </body>
</html>
<!-- 1.引入依赖 -->
<script src="./lib/lodash.js"></script>
<script>
  var btns = document.getElementsByTagName("button");
  // 2. 使用_.debounce 防抖函数
  // _.debounce(防抖的函数，防抖的时间)
  btns[0].onclick = _.debounce(function () {
    console.log("防抖了");
  }, 500);
  //  _.throttle(节流函数，节流时间)
  btns[1].onclick = _.throttle(function () {
    console.log("节流了");
  }, 1000);
</script>

stephen Curry_

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS 防抖和节流以及使用lodash库完成防抖和节流

JS 防抖和节流以及使用lodash库完成防抖和节流
复制链接

扫一扫