js事件节流

最新推荐文章于 2023-07-31 17:05:34 发布

weixin_34352005

最新推荐文章于 2023-07-31 17:05:34 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017029917

本文深入探讨了在浏览器中使用事件节流技术优化scroll事件处理的方法。通过限制事件触发频率，有效提升了滚动操作的性能，避免了快速滚动时的性能瓶颈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：在监听浏览器滚动条的scroll事件时该事件会触发很多次，这样当快速滚动时会有很差的性能，所以要限制事件触发的频率，可以防抖和节流，这里我记录简单的节流方法

<!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>事件节流</title>
  <style>
    .wrap {
      height: 10000px;
    }
  </style>
</head>

<body>
  <div class="wrap"></div>
  <script>
    var throttle = function (delay,interval, fn) {
      var startTime = new Date().getTime();
      var timer=null;
      return function () {
        var curTime = new Date().getTime();
        clearTimeout(timer);
        console.log(curTime - startTime, interval)
        if (curTime - startTime >= interval) {
          fn.apply(this, arguments)
          startTime = curTime
        }
        else{
          timer=setTimeout(fn,delay)
        }
      }
    }
    window.onscroll = throttle(500,2000, function () {
      console.log('我是水滴')
    })
  </script>
</body>

</html>

　　上面判断如果此时距离上次触发达到了某个时间就立刻触发，否则就延迟多少毫秒再触发，这样当持续滚动时代码会在每次滚动结束后一段时间内触发一次，同时也会在时间间隔超过一段时间内执行一次。