js如何实现节流函数节流函数的2种高效写法解析-js教程-PHP中文网

js如何实现节流函数节流函数的2种高效写法解析

下次还敢

发布： 2025-07-01 17:34:01

原创

678人浏览过

节流函数用于控制函数执行频率，避免频繁触发导致性能问题。其核心是平衡响应速度与资源消耗，主要有时间戳和定时器两种实现方式：1. 时间戳版本立即执行但可能忽略最后一次触发；2. 定时器版本延迟执行但确保最后一次触发一定执行；3. 可结合两者实现更完善但复杂的节流逻辑。在react中可通过useref和usecallback优化使用。常见应用场景包括resize监听、实时搜索、按钮防抖、滚动加载、游戏开发及动画优化。

js如何实现节流函数节流函数的2种高效写法解析

节流函数的核心在于控制函数执行的频率，确保在一段时间内只执行一次，避免因频繁触发导致性能问题。实现方式有很多，但目标始终是平衡响应速度和资源消耗。

// 时间戳版本
function throttleTimestamp(func, delay) {
  let previous = 0;
  return function(...args) {
    let now = Date.now();
    if (now - previous > delay) {
      func.apply(this, args);
      previous = now;
    }
  }
}

// 定时器版本
function throttleTimeout(func, delay) {
  let timeoutId;
  return function(...args) {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        timeoutId = null;
      }, delay);
    }
  }
}

登录后复制

节流函数的选择取决于具体场景。时间戳版本立即执行，定时器版本延迟执行。没有绝对的优劣，只有更适合。

为什么需要节流函数？

想象一下，一个用户疯狂滚动鼠标，触发了一个需要大量计算的函数。如果没有节流，这个函数可能会被调用成百上千次，瞬间让浏览器崩溃。节流就像一个交通信号灯，控制流量，确保道路畅通。更具体地说，比如监听window.resize事件，或者处理input框的实时搜索，没有节流，性能会非常糟糕。

时间戳节流 vs 定时器节流：该如何选择？

时间戳节流，第一次触发立即执行，最后一次触发可能不执行。定时器节流，第一次触发延迟执行，最后一次触发一定执行。如果你希望事件至少执行一次，选择定时器节流。如果你更关注响应速度，选择时间戳节流。但实际上，可以结合两者，实现一个更完善的节流函数：

function throttleCombined(func, delay) {
  let timeoutId;
  let previous = 0;

  return function(...args) {
    let now = Date.now();
    let remaining = delay - (now - previous);

    if (remaining <= 0) {
      clearTimeout(timeoutId);
      timeoutId = null;
      previous = now;
      func.apply(this, args);
    } else if (!timeoutId) {
      timeoutId = setTimeout(() => {
        previous = Date.now();
        timeoutId = null;
        func.apply(this, args);
      }, remaining);
    }
  };
}

登录后复制

这个版本兼顾了立即执行和最后一次执行的需求，但实现复杂度也更高。

如何在React中使用节流函数？

React函数组件中，可以使用useRef和useCallback来创建和缓存节流函数。避免每次渲染都重新创建函数，影响性能。

import React, { useRef, useCallback } from 'react';

function MyComponent() {
  const throttledFunction = useRef(throttleTimeout((value) => {
    console.log('Value:', value);
  }, 200));

  const handleChange = useCallback((event) => {
    throttledFunction.current(event.target.value);
  }, [throttledFunction]);

  return (
    <input type="text" onChange={handleChange} />
  );
}

登录后复制

useRef保存节流后的函数，useCallback确保handleChange函数只在依赖项改变时才重新创建。这是一个常见的优化技巧。