检查延迟后元素是否仍然有 mouseenter
check if element still has mouseenter after delay
我用 mouseenter
和 mouseleave
制作了一些积木
<button onMouseEnter={this.MouseEnter}>hover</button>
MouseEnter(e) {
setTimeout(() => {
//check if mouse over still on this element
// do action
}, 600);
}
问题是当我非常快速地移动方块时,最后一个方块在超时前检测到鼠标输入并执行操作,即使我没有悬停在方块上这是一个错误,我想让它成为操作运行 仅在悬停在块上 500ms
之后。
p.s:我正在与 react.js
合作
您 真正 缺少的部分是 mouseLeave
事件触发时超时回调的失效。为此,您需要保留返回的 setTimeout
值,以便在计时器到期之前调用 clearTimeout
( 或者如果组件卸载!!)
以下是基于 class 的组件中的基本机制:
state = {
hovered: false
};
timer;
mouseEnterHandler = () => this.setState({ hovered: true });
mouseLeaveHandler = () => this.setState({ hovered: false });
onTimeout = () => {
// Do action
};
clearTimer = () => {
clearTimeout(this.timer);
};
// Here's the meat:
// If state updates, then componentDidUpdate is called,
// if the new hovered state is true, set timeout and save the
// returned reference, else clear the timeout using the saved
// timer reference.
componentDidUpdate() {
const { hovered } = this.state;
if (hovered) {
this.timer = setTimeout(this.onTimeout, 500);
} else {
this.clearTimer();
}
}
// This is component cleanup, if the component unmounts before
// the timer expires you may not want the "Do action" to fire,
// so we go ahead and clear the timeout so you're not accidentally
// accessing state/props of an unmounted component.
componentWillUnmount() {
this.clearTimer();
}
以下是等效的功能组件逻辑:
const [hovered, sethovered] = useState(false);
const mouseEnterHandler = () => sethovered(true);
const mouseLeaveHandler = () => sethovered(false);
const onTimeout = () => {
// Do action
};
useEffect(() => {
const timer = hovered && setTimeout(onTimeout, 500);
return () => {
clearTimeout(timer);
};
}, [hovered]);
我用 mouseenter
和 mouseleave
<button onMouseEnter={this.MouseEnter}>hover</button>
MouseEnter(e) {
setTimeout(() => {
//check if mouse over still on this element
// do action
}, 600);
}
问题是当我非常快速地移动方块时,最后一个方块在超时前检测到鼠标输入并执行操作,即使我没有悬停在方块上这是一个错误,我想让它成为操作运行 仅在悬停在块上 500ms
之后。
p.s:我正在与 react.js
合作您 真正 缺少的部分是 mouseLeave
事件触发时超时回调的失效。为此,您需要保留返回的 setTimeout
值,以便在计时器到期之前调用 clearTimeout
( 或者如果组件卸载!!)
以下是基于 class 的组件中的基本机制:
state = {
hovered: false
};
timer;
mouseEnterHandler = () => this.setState({ hovered: true });
mouseLeaveHandler = () => this.setState({ hovered: false });
onTimeout = () => {
// Do action
};
clearTimer = () => {
clearTimeout(this.timer);
};
// Here's the meat:
// If state updates, then componentDidUpdate is called,
// if the new hovered state is true, set timeout and save the
// returned reference, else clear the timeout using the saved
// timer reference.
componentDidUpdate() {
const { hovered } = this.state;
if (hovered) {
this.timer = setTimeout(this.onTimeout, 500);
} else {
this.clearTimer();
}
}
// This is component cleanup, if the component unmounts before
// the timer expires you may not want the "Do action" to fire,
// so we go ahead and clear the timeout so you're not accidentally
// accessing state/props of an unmounted component.
componentWillUnmount() {
this.clearTimer();
}
以下是等效的功能组件逻辑:
const [hovered, sethovered] = useState(false);
const mouseEnterHandler = () => sethovered(true);
const mouseLeaveHandler = () => sethovered(false);
const onTimeout = () => {
// Do action
};
useEffect(() => {
const timer = hovered && setTimeout(onTimeout, 500);
return () => {
clearTimeout(timer);
};
}, [hovered]);