防抖（debounce）

最新推荐文章于 2024-06-16 12:11:30 发布

斐波娜娜

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量623

点赞数 11

文章标签： javascript

本文链接：https://blog.csdn.net/christmassss/article/details/135751647

版权

防抖:单位时间内，频繁触发事件，只执行最后一次

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

现在有一个小栗子：鼠标在box中移动的时候，触发mouseMove事件，如果不防抖的话，每移动1像素就会调用mouseMove()函数，如果mouseMove()函数中存在大量操作dom等情况，会产生卡顿，这个时候我们考虑防抖：单位时间内，频繁触发mouseMove事件，只执行最后一次

实现方式:

1.lodash 提供的防抖来处理

<body>
  <div class="box"></div>
  <script src="./lodash.min.js"></script>
  <script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function mouseMove() {
      box.innerHTML = ++i
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }
    // lodash 防抖的写法
    box.addEventListener('mousemove', _.debounce(mouseMove, 500))

  </script>
</body>

2.手写一个防抖函数来处理

防抖的核心就是利用定时器(setTimeout)来实现 :

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

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function mouseMove() {
      box.innerHTML = ++i
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }
    // 防抖函数
    function debounce(fn, t) {
      let timeId
      return function () {
        // 如果有定时器就清除
        if (timeId) clearTimeout(timeId)
        // 开启定时器 200
        timeId = setTimeout(function () {
          fn()
        }, t)
      }
    }
    // box.addEventListener('mousemove', mouseMove)
    box.addEventListener('mousemove', debounce(mouseMove, 200))

  </script>

斐波娜娜

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖:单位时间内，频繁触发事件，只执行最后一次。1.lodash 提供的防抖来处理。2.手写一个防抖函数来处理。
复制链接

扫一扫