节流

基本的节流函数实现的功能就是，只指定的时间段内只能执行一次，例如 time 传递设置 100，那么在 100ms 内的多次调用中，只会执行一次。

下面的模拟，通过 for 循环来进行多个调用+sleep 的阻塞，在当前本地测试的环境下，一个语句执行的时间为 10ms，那么循环 10 次，每次 sleep 10ms，在最后一次循环的时候就是在 100ms 处。

节流函数传了 time 为 100ms，那么 10 次循环中理论上只有最后一次循环的函数被执行，结果是只进行一个console.log("throttle")。然后由于设置了 immediate 为 true，表示在第一次调用的时候就立刻的执行一次，所以最后的结果是执行了 2 次console.log("throttle")

function throttle(func, time, immediate) {
  let timer = Date.now();

  if (immediate) {
    func();
  }

  return (args) => {
    const currentTime = Date.now();

    if (currentTime - timer > time) {
      func(args);
      timer = currentTime;
    }
  };
}

// 模拟调用

const sleep = (ms) =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });

const throttleFn = throttle(
  () => {
    console.log("throttle");
  },
  100,
  true
);

(async () => {
  for (let i = 0; i < 10; i++) {
    await sleep(10);
    throttleFn();
  }
})();

输出结果

throttle
throttle

节流​

节流