Javascript JS在新函数调用之前清除上一个函数调用的计时器

我的React应用程序使用材质UI中的滑块组件。它的onChange事件调用一个函数来更新状态。我意识到我的组件会为每个滑块步骤重新加载，这就是为什么我想在上次移动滑块后将状态更新延迟300毫秒的原因

我的方法是通过onChange启动一个状态更新计时器。当再次调用onChange时，应该取消上一个计时器。这是我仍在挣扎的部分

setSliderValue是一个函数，它使用一个数字来更新状态如何仅在再次调用sliderChangeHandler时清除“计时器”？

const [sliderValue, setSliderValue] = useState(20);

const sliderChangeHandler = (event, newValue) => {
    const timer = setTimeout(setSliderValue, 300, newValue);
    clearTimeout(timer);
};

---

您应该在您的状态中设置

setTimeout

返回值：

const[sliderValue，setSliderValue]=useState（20）；
const[timer，setTimer]=useState（）；
常量sliderChangeHandler=（事件，新值）=>{
清除超时（计时器）；
const newTimer=setTimeout（setSliderValue，300，newValue）；
设置定时器（新定时器）；
};

我建议您使用此库对任何函数进行去抖动：

在您的情况下，它将是：

const[sliderValue，setSliderValue]=useState（20）；
const debounced=useDebouncedCallback(
//作用
setSliderValue，
//毫秒延迟
300,
);
//代码的某些部分
取消公告。回调（30）；

---

在这种情况下，每次您呼叫

取消公告。callback

将取消以前的呼叫

谢谢您的提示！我更喜欢香草JS/React方式（您的第一个解决方案）：）很好，很高兴它有帮助。干杯