前端js防抖

一、原生js防抖

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <title>防抖按钮示例</title>
</head>
<body>
  <button id="immediateButton">立即触发</button>
  <button id="waitButton">等候触发</button>

  <script>
    function debounceImmediate(func, delay) {
      let timeoutId;
      let immediate = true;

      return function (...args) {
        clearTimeout(timeoutId);

        if (immediate) {
          func.apply(this, args);
          immediate = false;
        }

        timeoutId = setTimeout(() => {
          immediate = true;
        }, delay);
      };
    }

    function debounceWait(func, delay) {
      let timeoutId;

      return function (...args) {
        clearTimeout(timeoutId);

        timeoutId = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    }

    function handleImmediateClick() {
      console.log('立即触发按钮点击事件处理函数');
      // 在这里执行立即触发逻辑
    }

    function handleWaitClick() {
      console.log('等候触发按钮点击事件处理函数');
      // 在这里执行等候触发逻辑
    }

    const debouncedImmediateClick = debounceImmediate(handleImmediateClick, 1000); // 创建立即触发的防抖函数
    const debouncedWaitClick = debounceWait(handleWaitClick, 1000); // 创建等候触发的防抖函数

    const immediateButton = document.getElementById('immediateButton');
    immediateButton.addEventListener('click', debouncedImmediateClick);

    const waitButton = document.getElementById('waitButton');
    waitButton.addEventListener('click', debouncedWaitClick);
  </script>

</body>
</html>
相关推荐
Want5955 分钟前
C/C++大雪纷飞①
c语言·开发语言·c++
浪里行舟37 分钟前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1231 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚1 小时前
前端基础知识---Ajax
前端·javascript·ajax
有时间要学习1 小时前
Qt——窗口
开发语言·qt
AI智能研究院1 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233401 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder1 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
消失的旧时光-19432 小时前
@JvmStatic 的作用
java·开发语言·kotlin
skywalk81632 小时前
基于频域的数字盲水印blind-watermark
linux·开发语言·python