自从
let timer;
在组件的主体中声明,每次渲染都会重新定义它。所以到那时
handleMouseOver
正在尝试运行
clearTimeout(timer);
计时器实际上是未定义的。在这种情况下,ref可以用于保存的值/引用
timer
在渲染之间。
所以这样做应该会得到你想要的。
const timerRef=useRef(null);
const handleMouseOver = (item) => {
setNavOver(true);
if(timerRef.current) clearTimeout(timerRef.current);
for (var i = 0; i < dropdown.length; i += 1) {
if (dropdown[i].style.display === "none") {
dropdown[i].style.display = "block";
}
}
if (!currentItem) {
setCurrentItem(item);
}
};
const handleMouseOut = (event) => {
if (!event.relatedTarget || !event.relatedTarget.closest("nav")) {
setNavOver(false);
timerRef.current = setTimeout(() => {
for (var i = 0; i < dropdown.length; i += 1) {
dropdown[i].style.display = "none";
}
}, 700);
}
};
您还可能会造成内存泄漏,因此如果页面卸载,您也应该清理计时器,方法是在返回类似的useEffect时进行清理。
useEffect(()=>{
return()=> {
if(timerRef.current) clearTimeout(timerRef.current);
}
},[])