React项目使用Lodash的throttle实现节流功能不生效问题咨询

• 如果你实际代码中将throttledSetProgress定义在Player组件内部，组件每次重渲染都会生成全新的节流函数实例，原有节流计时器被重置，相当于每次调用都是新节流函数的第一次执行，自然每次都会触发setProgress。
• 当前全局共用一个节流实例的写法，所有视频的进度更新会共享冷却时间，如果频繁切换不同视频上报进度，会出现不符合预期的触发/拦截逻辑，容易被误认为节流失效。
• lodash的throttle默认开启leading: true配置，第一次调用会立即执行，如果你两次测试调用的间隔超过了30秒，每次都会触发leading阶段的执行，看起来就像节流没有生效。
• immediateUpdate分支中调用的throttledSetProgress.cancel()会清空所有待执行任务并重置节流计时器，如果有逻辑触发了该分支，会导致下一次普通调用直接执行。

方案1：单实例组件通用方案 #

如果你的Player组件同一时间只会渲染一个，不需要多实例隔离，用useRef保存节流实例避免重渲染重建即可：

import React, { useEffect, useRef, useCallback } from 'react';
import { throttle } from 'lodash';
import { setProgress } from '../../helpers/markersApi';

const EXECUTE_EVERY_THIRTY_SECONDS = 30 * 1000; 

const Player = () => {
  // 用useRef保存节流实例，重渲染不会重建
  const throttledSetProgress = useRef(
    throttle(setProgress, EXECUTE_EVERY_THIRTY_SECONDS, {
      // 根据业务需求调整，不需要首次立即执行就设为false
      leading: false,
      trailing: true
    })
  ).current;

  // 卸载时取消待执行任务，避免内存泄漏
  useEffect(() => {
    return () => throttledSetProgress.cancel();
  }, [throttledSetProgress]);

  const updateProgress = useCallback((playerPosition, asset, immediateUpdate = false) => {
    if (asset.type !== 'EPG_PROGRAM') {
      const { id, episode } = asset;
      const type = episode?.episodeNumber ? 'episode' : 'movie';

      if (immediateUpdate) {
        throttledSetProgress.cancel();
        setProgress(id, playerPosition, type);
      } else {
        throttledSetProgress(id, playerPosition, type);
      }
    }
  }, [throttledSetProgress]);

  useEffect(() => {
    updateProgress(position, playerAsset);
  }, [position, playerAsset, updateProgress]);
}

方案2：多视频/多实例隔离方案 #

如果需要每个视频的进度上报独立计算冷却时间，互不干扰，按视频id独立维护节流实例：

import React, { useEffect, useCallback } from 'react';
import { throttle } from 'lodash';
import { setProgress } from '../../helpers/markersApi';

const EXECUTE_EVERY_THIRTY_SECONDS = 30 * 1000; 
// 全局存储每个视频id对应的节流实例
const progressThrottlerMap = new Map();

const getThrottledFn = (assetId) => {
  if (!progressThrottlerMap.has(assetId)) {
    const throttledFn = throttle(setProgress, EXECUTE_EVERY_THIRTY_SECONDS, { leading: false });
    progressThrottlerMap.set(assetId, throttledFn);
  }
  return progressThrottlerMap.get(assetId);
};

const Player = () => {
  const updateProgress = useCallback((playerPosition, asset, immediateUpdate = false) => {
    if (asset.type !== 'EPG_PROGRAM') {
      const { id, episode } = asset;
      const type = episode?.episodeNumber ? 'episode' : 'movie';
      const throttledSetProgress = getThrottledFn(id);

      if (immediateUpdate) {
        throttledSetProgress.cancel();
        setProgress(id, playerPosition, type);
        progressThrottlerMap.delete(id);
      } else {
        throttledSetProgress(id, playerPosition, type);
      }
    }
  }, []);

  // 切换视频时清理旧视频的节流实例，避免内存泄漏
  useEffect(() => {
    const currentAssetId = playerAsset?.id;
    return () => {
      if (currentAssetId && progressThrottlerMap.has(currentAssetId)) {
        progressThrottlerMap.get(currentAssetId).cancel();
        progressThrottlerMap.delete(currentAssetId);
      }
    }
  }, [playerAsset?.id]);

  useEffect(() => {
    updateProgress(position, playerAsset);
  }, [position, playerAsset, updateProgress]);
}

内容的提问来源于stack exchange，提问作者Tuxedo Joe