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

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

相关推荐
Sapphire~9 分钟前
重学前端003 --- CSS 颜色
前端·css
慧一居士9 分钟前
CSS和CSS3区别对比
前端·css3
蹦蹦跳跳真可爱5899 分钟前
Python----OpenCV(几何变换--图像平移、图像旋转、放射变换、图像缩放、透视变换)
开发语言·人工智能·python·opencv·计算机视觉
我血条子呢9 分钟前
动态组件和插槽
前端·javascript·vue.js
骁的小小站14 分钟前
HDLBits刷题笔记和一些拓展知识(十一)
开发语言·经验分享·笔记·其他·fpga开发
Jtti15 分钟前
如何准确查看服务器网络的利用率?
开发语言·php
中微子17 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪18 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
人生在勤,不索何获-白大侠21 分钟前
day17——Java集合进阶(Collections、Map)
java·开发语言
南屿im24 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript