js 节流函数封装示例

王世诣

于 2023-10-23 14:47:56 发布

阅读量247

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/CSDNwangyi/article/details/133989999

版权

本文介绍了JavaScript中的节流函数实现，通过`throttle`函数限制fn函数在给定延迟后的执行，以及为何返回一个新函数和使用`timer=null`而非`clearTimeout`的原因。

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>节流函数示例</title>
  <div
    style="width: 400px;height: 400px;background-color: red;font-size: 30px; text-align: center; line-height: 200px;">
  </div>
</head>

<body>

  <script>

    const throttle = function (fn, delay) {
      let timer = null;
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
          }, delay);
        }
      };
    };
    const test = function (name) {
      let count = 0;
      return throttle(function () {
        document.querySelector('div').innerHTML = name + count++;
      }, 400);
    };


    document.querySelector('div').addEventListener('mousemove', test('张三'))

  </script>

</body>

</html>