如何对Range Slider进行节流以减少滑动时的频繁调用？

问题根源 #

你的节流函数失效是因为组件每次渲染都会重新创建节流后的函数，导致节流内部的wait状态被重置，无法起到限制调用频率的作用。

修复方案 #

我们需要用useRef持久化节流函数的状态，避免组件重渲染时重置wait；同时用useCallback确保节流函数的引用稳定，分离实时UI更新与节流逻辑，兼顾响应速度和调用频率控制。

修复后的完整代码 #

import * as React from "react";
import Box from "@mui/material/Box";
import Slider from "@mui/material/Slider";

function valuetext(value: number) {
  return `${value}°C`;
}

// 自定义节流钩子，用useRef持久化状态
const useThrottle = (callback: (...args: any[]) => void, delay: number) => {
  const waitRef = React.useRef(false);

  return React.useCallback((...args: any[]) => {
    if (!waitRef.current) {
      callback(...args);
      waitRef.current = true;
      setTimeout(() => {
        waitRef.current = false;
      }, delay);
    }
  }, [callback, delay]);
};

export default function RangeSlider(props) {
  const [displayValue, setDisplayValue] = React.useState<number[]>([2, 30]);

  // 节流处理的逻辑：限制props.setter和打印的频率
  const throttledLogic = (newValue: number | number[]) => {
    props.setter(newValue);
    console.log("仅按间隔打印:", newValue);
  };

  // 生成节流函数，设置1000ms间隔（每秒触发一次）
  const throttledHandleChange = useThrottle(throttledLogic, 1000);

  return (
    <Box sx={{ width: 300, marginTop: 30 }}>
      <Slider
        defaultValue={displayValue}
        value={displayValue}
        onChange={(_, newValue) => {
          // 直接更新状态保证滑块UI实时响应
          setDisplayValue(newValue as number[]);
          // 执行节流后的逻辑
          throttledHandleChange(newValue);
        }}
        valueLabelDisplay="on"
        getAriaValueText={valuetext}
      />
    </Box>
  );
}

关键改动说明 #

1. 自定义useThrottle钩子：用useRef保存wait状态，确保组件重渲染时节流的状态不会丢失；useCallback保证节流函数的引用稳定，避免无效重新创建。
2. 分离实时与节流逻辑：在Slider的onChange中直接更新displayValue，保证滑块UI实时跟随拖动；节流逻辑只处理需要限制频率的操作（如父组件状态更新、打印）。
3. 优化参数传递：直接使用MUISlider回调提供的newValue，避免event.target.value可能存在的类型或取值问题。

改用lodash throttle的修复方式 #

如果想用回lodash的节流函数，同样需要用useCallback包裹来保证引用稳定：

import throttle from "lodash.throttle";
// ...

const throttledHandleChange = React.useCallback(
  throttle((newValue) => {
    props.setter(newValue);
    console.log("仅按间隔打印:", newValue);
  }, 1000),
  [props.setter]
);

// 滑块onChange回调
onChange={(_, newValue) => {
  setDisplayValue(newValue as number[]);
  throttledHandleChange(newValue);
}}

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