最全 ES6 JS 防抖节流实现详解

2023-10-08 15:10:41

前言

防抖和节流是 JavaScript 中常见的函数装饰器，用于优化函数的调用频率，防止函数被过度调用。它们在处理事件处理程序和动画循环等场景中非常有用。

防抖

防抖函数可以确保函数在一段时间内只被调用一次，即使它被多次触发。这对于防止函数被过度调用非常有用，例如在处理事件处理程序时。

ES6 中实现防抖函数的一种方法是使用 debounce() 函数。debounce() 函数接受两个参数：要装饰的函数和一个延迟时间。延迟时间是指在函数被再次调用之前必须经过的时间。

const debounce = (func, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func(...args);
    }, delay);
  };
};

上面的代码中，debounce() 函数返回一个新的函数，这个新函数可以被多次调用，但它只会在最后一次调用后延迟指定的时间才执行。

节流

节流函数可以确保函数在一定时间内只被调用一次，即使它被多次触发。这对于防止函数被过度调用非常有用，例如在处理动画循环时。

ES6 中实现节流函数的一种方法是使用 throttle() 函数。throttle() 函数接受两个参数：要装饰的函数和一个时间间隔。时间间隔是指函数被调用之间的最短时间。

const throttle = (func, interval) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= interval) {
      lastCall = now;
      func(...args);
    }
  };
};