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

Question

我的 React 应用程序使用来自 Material UI 的滑块组件。它的 onChange 事件调用一个函数来更新状态。我意识到我的组件会为每个滑块步骤重新呈现，这就是为什么我想在上次移动滑块后将状态更新延迟大约 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 return 值：

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 都会取消之前的调用

Answer 2

我通常使用 useRef 钩子来去抖动。类似于：

const timeoutRef = useRef(null)

const [sliderValue, setSliderValue] = useState(20)

const onChange = (e, v) => {
  clearTimeout(timeoutRef.current)
  timeoutRef.current = setTimeout(setSliderValue, 300, v)
}

节省一行代码;)

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

JS clear timer of previous function call before new function call

javascript

reactjs

timer

slider

cleartimeout