feat: Improve letter item hover interaction with debounce mechanism

This commit is contained in:
wonfen 2025-02-18 09:00:03 +08:00
parent f0331ec2d9
commit 3c2e04290c

View File

@ -115,6 +115,7 @@ const LetterItem = memo(
top: 0, top: 0,
right: 0, right: 0,
}); });
const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
const updateTooltipPosition = useCallback(() => { const updateTooltipPosition = useCallback(() => {
if (!letterRef.current) return; if (!letterRef.current) return;
@ -131,14 +132,37 @@ const LetterItem = memo(
} }
}, [showTooltip, updateTooltipPosition]); }, [showTooltip, updateTooltipPosition]);
const handleMouseEnter = useCallback(() => {
setShowTooltip(true);
// 添加 200ms 的延迟,避免鼠标快速划过时触发滚动
hoverTimeoutRef.current = setTimeout(() => {
onClick(name);
}, 100);
}, [name, onClick]);
const handleMouseLeave = useCallback(() => {
setShowTooltip(false);
if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current);
}
}, []);
useEffect(() => {
return () => {
if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current);
}
};
}, []);
return ( return (
<> <>
<div <div
ref={letterRef} ref={letterRef}
className="letter" className="letter"
onClick={() => onClick(name)} onClick={() => onClick(name)}
onMouseEnter={() => setShowTooltip(true)} onMouseEnter={handleMouseEnter}
onMouseLeave={() => setShowTooltip(false)} onMouseLeave={handleMouseLeave}
> >
<span>{getFirstChar(name)}</span> <span>{getFirstChar(name)}</span>
</div> </div>