节流实现案例

最新推荐文章于 2024-04-03 13:08:44 发布

快乐的小青蛙。

最新推荐文章于 2024-04-03 13:08:44 发布

阅读量363

点赞数

文章标签：节流 js

本文链接：https://blog.csdn.net/weixin_46002223/article/details/124111040

版权

本文介绍了一个使用JavaScript实现的节流函数案例，通过限制鼠标移动事件的触发频率，确保UI响应平滑。核心在于throttle函数，它在500毫秒内仅执行一次回调，有效防止了频繁事件导致的性能问题。

摘要由CSDN通过智能技术生成

节流案例

<!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>
    <style>
      .box {
        width: 500px;
        height: 500px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        font-size: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>

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

      // 鼠标移动函数
      function mouseMove() {
        box.innerHTML = ++i
      }

      // 节流函数
      function thottle(fn, t) {
        // 起始时间
        let startTime = 0
        return function () {
          // 得到现在的时间
          let now = Date.now()
          // 判断大于等于500  调用函数
          if (now - startTime >= t) {
            fn()
            // 执行完成后将现在的时间赋值给起始时间
            startTime = now
          }
        }
      }
      box.addEventListener('mousemove', thottle(mouseMove, 500))
    </script>
  </body>
</html>

快乐的小青蛙。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
节流实现案例

节流案例<!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" /> &lt
复制链接

扫一扫