debounce and throtlle

debounce

javascript 复制代码
      // 核心:单位时间内触发>1 则只执行最后一次。
      //excutioner 可以认为是执行器。执行器存在则清空,再赋值新的执行器。
      function debounce(fn, delay = 500) {
        let excutioner = null;
        return function () {
          let context = this;
          let args = arguments;

          if (excutioner) {
            clearTimeout(excutioner);
          }
          excutioner = setTimeout(() => {
            fn.apply(context, args);
          }, delay);

          console.log("excutioner", excutioner);
        };
      }

      const clickFun = params => {
        console.log("this is click Fun", params);
      };

      const butt = document.getElementById("clickBut");
      //传参的2种方式
      butt.addEventListener(
        "click",
        debounce(() => clickFun(100), 1000)
      );
      // butt.addEventListener("click", debounce(clickFun, 1000).bind(this, 100));

throtlle

javascript 复制代码
      // 单位时间内触发>1次 只执行第一次
      function throttle(fn, delay = 1000) {
        let excutioner = null;
        return function () {
          const context = this;
          const args = arguments;
          if (!excutioner) {
            excutioner = setTimeout(() => {
              fn.apply(context, args);
              excutioner = null;
            }, deplay);
          }
        };
      }
      const butt2 = document.getElementById("clickBut2");
      //传参
      butt.addEventListener(
        "click",
        throttle(() => clickFun(100), 1000)
      );

注: //在 JavaScript 中,arguments 是一个类数组对象,它表示传递给一个函数的参数集合。通过使用 arguments

对象,你可以在函数内部访问到传递给该函数的所有参数,即使你在函数声明中没有明确指定这些参数。

相关推荐
listhi5208 分钟前
利用React Hooks简化状态管理
前端·javascript·react.js
初见无风27 分钟前
2.5 Lua代码中string类型常用API
开发语言·lua·lua5.4
一点一木32 分钟前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
做运维的阿瑞36 分钟前
用 Python 构建稳健的数据分析流水线
开发语言·python·数据分析
华仔啊37 分钟前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
左师佑图40 分钟前
综合案例:Python 数据处理——从Excel文件到数据分析
开发语言·python·数据分析·excel·pandas
非凡ghost1 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
陌路201 小时前
C23构造函数与析构函数
开发语言·c++
BestAns2 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
_OP_CHEN2 小时前
C++进阶:(二)多态的深度解析
开发语言·c++·多态·抽象类·虚函数·多态的底层原理·多态面试题