JS中的性能优化——防抖、节流简解

最新推荐文章于 2024-06-21 15:29:16 发布

进击的小贾

最新推荐文章于 2024-06-21 15:29:16 发布

阅读量1.6k

点赞数 11

分类专栏： Web重要学习知识点文章标签： css 前端 javascript js 开发语言

本文链接：https://blog.csdn.net/Tom299/article/details/138035562

版权

Web重要学习知识点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.防抖

单位时间内，频繁触发事件，只执行最后一次（从头开始执行）

执行下面代码，只要鼠标在盒子上移动时，盒子数字快速增加

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: darkcyan;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      box.innerHTML = i++
    }
    box.addEventListener('mousemove', mouseMove)
  </script>
</body>
</html>

但在更多时候，我们想让盒子从一处移动到另外一处，只会增加一次。

1.1.封装防抖函数

思路：

声明一个定时器变量
当鼠标每次滑动都判断是否有定时器，如果有定时器，先清除以前定时器
如果没有定时器，则开一个定时器
在定时器里面调用要执行的函数

实现：

  const box = document.querySelector('.box')
  let i = 1

function mouseMove() {
    box.innerHTML = i++
}

function debounce(fn, t) {
    // 1.声明一个定时器变量
    let timer
    return function () {
        // 2.如果有定时器，先清除定时器
        if (timer) clearTimeout(timer)
        // 3.4.重新设置定时函数
        timer = setTimeout(fn, t)
    }
}
box.addEventListener('mousemove', debounce(mouseMove, 200))

解释：

这里比较难以理解的是为什么要return一个函数，其实这和我们要封装的 debounce()函数的用法有关
平常我一般会写一个函数在mousemove后后面，例如：

box.addEventListener('mousemove', function(){})

这样写我们其实是在这里定义了一个函数，而并没有调用这个函数，而是mousemove事件触发后再调用
但是我们要封装的 debounce()函数使用时是以调用的写法写入，在写入后，没有触发mousemove事件便会调用，而触发mousemove事件却不会调用。
而我们加入return并返回函数后，return外的函数在解析完代码时就已经执行，触发mousemove事件后，调用的是return返回的函数。

上面的解释可能比较难懂，以下我来用代码演示以下执行过程吧（如果看不懂上面可直接跳到此处）

代码解析后会执行：

// 1.声明一个定时器变量
let timer

触发mousemove事件后，执行return返回的函数：

box.addEventListener('mousemove', function () {
    // 2.如果有定时器，先清除定时器
    if (timer) clearTimeout(timer)
    // 3.重新设置定时函数
    timer = setTimeout(mouseMove, 200)
})

1.2.lodash防抖

lodash防抖函数：

语法：_.debounce(要执行的函数, 延后执行的时间)

<!-- 在使用时我已经将lodash的js文件下载到了本地 -->
<script src="../lodash.min.js"></script>
<script>
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      box.innerHTML = i++
    }
    box.addEventListener('mousemove', _.debounce(mouseMove, 200))
  </script>

将上面的代码运行，则当鼠标在盒子上移动时，盒子里的数字不会增加
当鼠标在盒子移动并悬停超过200毫秒时（或者鼠标移出盒子），盒子里的数字增加

2.节流

2.1.封装节流函数

思路：

声明一个定时器变量
当鼠标每次滑动都判断是否有定时器，如果有定时器已经开启，则不做操作
如果没有定时器，则开一个定时器
定时器到达时间，清空定时器

实现：

const box = document.querySelector('.box')
    let i = 1

    function mouseMove() {
      box.innerHTML = i++
    }

    function debounce(fn, t) {
      // 1.声明一个空定时器变量
      let timer = null
      return function () {
        // 2.如果没有定时器，可以设置定时器
        if (!timer) {
          timer = setTimeout(function () {
            fn()
            // 4.冷却完，清空定时器
            timer = null
          }, t)
        }
        // 3.如果已经有定时器，不做操作
      }
    }
    box.addEventListener('mousemove', debounce(mouseMove, 3000))

封装节流函数的思路与封装防抖函数思路相同，这里就不过多赘述。

代码改进：

值得一提的是，在测试这个代码时，我发现上面代码与lodash里面封装的节流函数有一定区别：我们上面封装的节流函数在第一次进入时盒子需要等3秒钟盒子数字才改变，而lodash封装函数第一次进入盒子，数字立马改变。
出现这个问题是，我们先调用函数，再定时；而在实际应用中，顺序恰恰应该相反。
其实还原lodash效果很简单，改一下if里的函数调用位置即可：

if (!timer) {
    fn()
    timer = setTimeout(function () {
        // 4.冷却完，清空定时器
        timer = null
    }, t)
}

2.1.lodash节流

<!-- 在使用时我已经将lodash的js文件下载到了本地 -->
<script src="../lodash.min.js"></script>
<script>
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
        box.innerHTML = i++
    }
    box.addEventListener('mousemove', _.throttle(mouseMove, 3000))
</script>