linux

JavaScript函数节流如何实现

小樊
43
2025-08-28 12:36:34
栏目: 编程语言

JavaScript 函数节流(throttle)是一种优化手段,用于限制某个函数在指定时间间隔内只能执行一次。这在处理高频触发事件(如滚动、窗口大小调整等)时非常有用,可以提高性能。

以下是一个简单的 JavaScript 函数节流实现:

function throttle(func, delay) {
  let lastCall = 0; // 上次调用的时间戳
  let timer = null; // 定时器

  return function (...args) {
    const now = Date.now(); // 当前时间戳

    if (now - lastCall >= delay) {
      // 如果距离上次调用已经超过指定的时间间隔,则立即执行函数
      lastCall = now;
      func.apply(this, args);
    } else if (!timer) {
      // 如果距离上次调用还未超过指定的时间间隔,则设置一个定时器,在指定时间间隔后执行函数
      timer = setTimeout(() => {
        lastCall = Date.now();
        func.apply(this, args);
        timer = null;
      }, delay - (now - lastCall));
    }
  };
}

使用示例:

function onScroll() {
  console.log('滚动事件触发');
}

const throttledOnScroll = throttle(onScroll, 200);

window.addEventListener('scroll', throttledOnScroll);

在这个示例中,onScroll 函数会在滚动事件触发时被节流,确保在 200 毫秒内最多执行一次。

0
看了该问题的人还看了