封装一个防抖函数，并给防抖函数中传入的函数传参

永远不会太晚

于 2024-03-31 17:37:55 发布

阅读量601

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_42611074/article/details/137204811

本文介绍了如何在HTML页面中利用JavaScript编写一个防抖函数，用于优化滚动事件的处理性能，当用户滚动页面时，每200毫秒执行一次事件处理逻辑，有效减少无用的重复操作。

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<style>
  body {
    height: 300vh;
    background-color: pink;
  }
</style>
<script>
  // 防抖函数
  function debounce(func, delay) {
    let timerId;
    return function (...args) {
      clearTimeout(timerId);
      timerId = setTimeout(() => {
        func.apply(this, args);
      }, delay);
    };
  }

  // 创建一个防抖函数来处理 scroll 事件
  const debouncedScrollHandler = debounce(function (event) {
    console.log(event);
  }, 200); // 设置防抖的延迟时间为 200 毫秒

  // 将防抖后的 scroll 事件处理函数绑定到 window 的 scroll 事件上
  window.addEventListener("scroll", debouncedScrollHandler);
</script>

</html>