JavaScript函数节流如何实现

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 毫秒内最多执行一次。

以上就是关于“JavaScript函数节流如何实现”的相关介绍，筋斗云是国内较早的云主机应用的服务商，拥有10余年行业经验，提供丰富的云服务器、租用服务器等相关产品服务。云服务器资源弹性伸缩，主机vCPU、内存性能强悍、超高I/O速度、故障秒级恢复；电子化备案，提交快速，专业团队7×24小时服务支持！

简单好用、高性价比云服务器租用链接：https://www.jindouyun.cn/product/cvm