检查延迟后元素是否仍有 mouseenter

Question

我用 amouseenter和mouseleave

<button onMouseEnter={this.MouseEnter}>hover</button>

MouseEnter(e) {

    setTimeout(() => {

        //check if mouse over still on this element 

        // do action

    }, 600);

}

问题是当我快速移动块时，最后一个块在超时之前检测到 mouseenter 并执行操作，即使我没有悬停在块上，这是一个错误，我想让它只在500ms悬停后运行在块上。

ps：我正在使用 react.js

Answer 1

如果事件被触发，您真正缺少的是超时回调的失效。mouseLeave为此，您需要保留返回的setTimeout值以便clearTimeout在计时器到期之前调用（或者如果组件卸载！！）以下是基于类的组件中的基本机制：state = {&nbsp; hovered: false};timer;mouseEnterHandler = () => this.setState({ hovered: true });mouseLeaveHandler = () => this.setState({ hovered: false });onTimeout = () => {&nbsp; // Do action};clearTimer = () => {&nbsp; 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() {&nbsp; const { hovered } = this.state;&nbsp; if (hovered) {&nbsp; &nbsp; this.timer = setTimeout(this.onTimeout, 500);&nbsp; } else {&nbsp; &nbsp; this.clearTimer();&nbsp; }}// 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() {&nbsp; this.clearTimer();}以下是等效的功能组件逻辑：const [hovered, sethovered] = useState(false);const mouseEnterHandler = () => sethovered(true);const mouseLeaveHandler = () => sethovered(false);const onTimeout = () => {&nbsp; // Do action};useEffect(() => {&nbsp; const timer = hovered && setTimeout(onTimeout, 500);&nbsp; return () => {&nbsp; &nbsp; clearTimeout(timer);&nbsp; };}, [hovered]);