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

最新推荐文章于 2025-02-15 12:04:52 发布

原创最新推荐文章于 2025-02-15 12:04:52 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

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

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