如何解决JS在新函数调用之前清除上一个函数调用的计时器
我的 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);
};
解决方法
您应该在您的状态中设置 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
都会取消之前的调用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。