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

Question

我的 React 应用程序使用 Material UI 中的 slider 组件。它的 onChange 事件调用一个函数来更新状态。我意识到我的组件会为每个 slider 步骤重新渲染，这就是为什么我想在最后一次移动 slider 后将状态更新延迟 300 毫秒。
我的方法是通过 onChange 启动一个带有状态更新的计时器。当再次调用 onChange 时，应该取消之前的计时器。这是我仍在努力的部分。
setSliderValue 是一个函数，它接受一个数字来更新状态。 仅当再次调用 sliderChangeHandler 时，如何清除“计时器”？

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

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

Answer 1

你应该设置setTimeout您所在州的返回值:

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

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

我建议你使用这个库来消除任何函数的抖动: https://github.com/xnimorz/use-debounce
在您的情况下，它将是:

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

const debounced = useDebouncedCallback(
  // function
  setSliderValue,
  // delay in ms
  300,
);

// some part of the code
debounced.callback(30);

在这种情况下，每次调用 debounced.callback它将取消之前的通话