前端性能优化--防抖和节流

小叮当仁不让

已于 2024-01-06 11:16:01 修改

阅读量101

点赞数

文章标签：前端

于 2023-11-11 16:30:06 首次发布

本文链接：https://blog.csdn.net/qq_44971069/article/details/134349986

版权

防抖（debounce）和节流（throttle）是优化高频触发事件的技术，它们可以提高性能，避免不必要的计算和函数执行。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

1.防抖函数：一段时间内，只执行最后一次。防止抖动，它在短时间内多次触发同一个事件时，会取消之前的触发，直到最后一次触发后的一定时间间隔内没有新的触发才执行函数。
（列举: 打个比方，1.坐公交，司机需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门。2.比作等电梯，只要有一个人进来，就需要再等一会儿。）
防抖的应用场景：
（1）登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
（2）调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
（3）文本编辑器实时保存，当无任何更改操作一秒后进行保存

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>debounce防抖</title>
</head>

<body>
  <div>
    <input id="search" type="text" />
    <div id="counts"></div>

    <script>
      /*
      * func  执行的方法
      * wait  等待的时间
      */
      function debounce (func, wait = 1000) {
        let timer = null
        return () => {
          // 前一个定时器还没结束，清空当前定时器，重新开始计时
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(func, wait)
        }
      }
      // 键盘抬起事件
      function Count () {
        counts.innerText = ++count
      }
      // 执行的次数
      let count = 0
      // 获取元素
      let counts = document.getElementById("counts")
      let search = document.getElementById("search")

      // 键盘抬起时,触发事件
      search.addEventListener("keyup", debounce(Count, 2000))
    </script>
  </div>
</body>

</html>

2.节流函数：一段时间内，只执行一次。控制流量，它会在触发事件期间以固定的时间间隔执行函数，而不管事件触发得多频繁。
（列举: 1.乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。2.比作过红绿灯，每等一个红灯时间就可以过一批。）

节流的应用场景：
（1）鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
（2）监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载。
（3）浏览器播放事件，每个一秒计算一次进度信息等

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>throttle节流</title>
</head>

<body>
  <div>
    <input id="search" type="text" />
    <div id="counts"></div>

    <script>
      /*
      * func  执行的方法
      * wait  等待的时间
      */
      function throttle (func, wait = 1000) {
        let timer = null
        return () => {
          // 若存在，则直接结束函数，不继续执行
          if (timer) {
            return
          }
          // 实现一段时间只执行一次
          timer = setTimeout(() => {
            func()
            timer = null
          }, wait)
        }
      }
      // 键盘抬起事件
      function Count () {
        counts.innerText = ++count
      }
      // 执行的次数
      let count = 0
      // 获取元素
      let counts = document.getElementById("counts")
      let search = document.getElementById("search")
      // 键盘抬起时,触发事件
      search.addEventListener("keyup", debounce(Count, 2000))
    </script>
  </div>
</body>

</html>

参考：
https://blog.csdn.net/dksks130/article/details/128198018
https://blog.csdn.net/ekcchina/article/details/130653568

小叮当仁不让

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端性能优化--防抖和节流

1.防抖函数：一段时间内，只执行最后一次。防止抖动，它在短时间内多次触发同一个事件时，会取消之前的触发，直到最后一次触发后的一定时间间隔内没有新的触发才执行函数。（列举: 乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。控制流量，它会在触发事件期间以固定的时间间隔执行函数，而不管事件触发得多频繁。（2）调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖。（throttle）是优化高频触发事件的技术，它们可以提高性能，避免不必要的计算和函数执行。
复制链接

扫一扫