js 节流函数封装示例

最新推荐文章于 2024-06-10 22:18:41 发布

王世诣

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量171

点赞数

文章标签： javascript 开发语言 ecmascript

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

版权

<!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>

可能存在的难点：为什么返回一个function？答：因为入参是个fn，你得把返回值也写成一个函数。
为什么清除定时器要用timer=null，不用clearTimeout？答：因为清除定时器的时机是三秒后，只能写在定时器内，而clearTimeout只能定时器外部调用，所以用null。

王世诣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 节流函数封装示例

为什么清除定时器要用timer=null，不用clearTimeout？答：因为清除定时器的时机是三秒后，只能写在定时器内，而clearTimeout只能定时器外部调用，所以用null。可能存在的难点：为什么返回一个function？答：因为入参是个fn，你得把返回值也写成一个函数。
复制链接

扫一扫