认识

2024年03月12日

柏拉文

越努力，越幸运

一、认识

---

节流（throttle） 是一种控制函数执行频率的技术，其目的是在一定时间间隔内保证函数最多只执行一次，从而降低高频操作（如滚动、窗口调整、鼠标移动等）带来的性能消耗。节流（throttle） 实现原理: 通过 setTimeout 创建一个定时器, 规定时间内只允许一次调用, 定时器结束后清除, 允许下一次调用。如果采用 trailing 模式, 记录最后一次调用时的参数, 确保最后一次调用能用最新参数执行函数。

二、实现

---

function throttle(fn, wait, immediate) {
  let timer = null;
  let lastArgs = null;

  return function (...args) {
    if (!timer) {
      if (immediate) {
        fn.apply(this, args);
      } else {
        lastArgs = args;
      }

      timer = setTimeout(() => {
        if (!immediate && lastArgs) {
          fn.apply(this, lastArgs);
          lastArgs = null;
        }

        timer = null;
      }, wait);
    } else {
      if (!immediate) {
        lastArgs = args;
      }
    }
  };
}