详解利用闭包实现防抖与节流的原理与应用

定义

防抖：是在事件触发后 n 秒内函数只能执行一次，如果在这 n 秒内又被重新触发，则重新计算执行时间。（多次触发，只执行最后一次）

节流：是在事件触发后，每 n 秒只执行一次函数，无论在这 n 秒内触发了多少次。（规定时间内，只触发一次）

防抖

目的：确保事件处理函数在高频触发的情况下，只会被执行一次，即使事件被连续触发多次。

实现：防抖函数会设置一个定时器，在指定时间间隔内，如果事件被再次触发，则会清除之前的定时器并重新设置。只有当指定时间间隔过去后，且事件没有再次被触发，才会执行事件处理函数。

应用场景：

1. 实时搜索建议（避免每次输入一个字符都发送请求）
2. 窗口大小调整时（避免在调整过程中频繁触发计算）

基本实现

const btn = document.querySelector("#btn1");
let timer = null;
btn.onclick = function () {
     if (timer) clearTimeout(timer);
     timer = setTimeout(() => {
       console.log("防抖");
     }, 500);
};

闭包实现

function debounce(fn, t) {
    let timer = null;
    return function () {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn();
      }, t);
    };
  }

此时我们发现this指向存在问题，按理说当目标执行了监听事件,this应该要指向该目标，此时我们打印的fn函数this是指向window的：

原因：setTimeout 的回调函数是在全局作用域中异步执行的，且箭头函数内的fn()调用没有显式地绑定 this 上下文，因此当 fn 执行时，它的 this 值将由它如何被调用的方式来决定。如果 fn 是作为普通函数调用（即没有使用.、call、apply 或 bind），那么 this 通常会指向全局对象（在浏览器中是 window）。

因此对于上述代码进行修改：

// 1.1 封装防抖的闭包
   function debounce(fn, t) {
     let timer = null;
     // args 数组  使用剩余参数语法来接收所有参数
     return function (...args) {
       // 剩余参数语法 ...args 只能放在形参的最末尾
       // 语法结构：...xxx 其中xxx 即 args 类型为数组
       // 内容：包含所有传递过来的变量 并将他们变为数组args
       if (timer) clearTimeout(timer);
       timer = setTimeout(() => {
         fn.apply(this, args); //  fn, call(this, ...args); ...args 此时是扩展运算符
       }, t);
     };
   }

   // 1.2 复用防抖函数
   debounce(function () {
     console.log("闭包防抖");
   }, 1000);

节流

目的：确保事件处理函数在高频触发的情况下，会以一定的频率执行，而不是只执行一次。

实现：节流函数会设置一个状态变量（如 open）和一个定时器。当事件被触发时，如果状态变量允许，则执行事件处理函数，并设置定时器在指定时间间隔后再次允许执行。如果事件在定时器期间被再次触发，则不会执行事件处理函数，直到定时器结束。

应用场景：

1. 滚动事件，如无限滚动加载（避免在滚动过程中频繁触发加载）
2. 鼠标移动事件，如鼠标跟随提示（避免鼠标快速移动时提示频繁闪烁）。

闭包实现

// 2.1 闭包节流
// 操作过程：设置节流阀是打开的，用户一触发事件，就判断节流阀状态:
// 如果是打开状态就开始工作：关闭节流阀，然后执行延时器，在延时器中执行完之后再打开节流
function throttle(fn, t) {
 // 节流阀是打开的
 let open = true;
 // args 数组  使用剩余参数语法来接收所有参数
 return function (...args) {
   if (open) {
     // 关闭节流阀
     open = false;
     setTimeout(() => {
       // 使用apply确保this和参数都被正确传递  apply传参为数组 call为参数并逗号连接
       fn.apply(this, args); // 使用 apply 来调用 fn，并传递参数和正确的 this 上下文
       // 打开节流阀
       open = true;
     }, t);
   }
 };
}
// 2.1 复用节流闭包函数
btn.onclick = throttle(function () {
 console.log("闭包节流");
}, 1000);

闭包的应用：在下面实现中，闭包被用来保存 lastCall 变量，这个变量用于记录上一次函数被调用的时间。由于闭包的存在，每次调用返回的节流函数都能访问和更新这个 lastCall 变量，从而实现了在规定的时间间隔内只执行一次函数的效果。

function throttle(fn, delay) {
 // 记录上次触发时间
 let lastCall = 0;
 return function (...args) {
   let nowCall = new Date().getTime();
   if (nowCall - lastCall > delay) {
     fn.apply(this, args);
     lastCall = nowCall;
   }
 };
}

如果觉得这篇文章帮助到了您，麻烦给这个小博主点点赞~😝 若有疑惑或想和小伙伴一起分享，评论区的大门随时为你敞开💕