javascript - 如何检测鼠标何时停止在 React 中移动？

Question

我正在尝试根据鼠标移动动态切换按钮元素的可见性(即，当鼠标移动时，{visibility: visibility}，{visibility: hidden} 当它停止移动时)。该按钮与 onMouseMove 一起显示，但我正在为第二部分的开始而苦苦挣扎。由于 React 没有 onMouseStop 事件，实现此目的的最佳方法是什么？

export default class Infographic extends Component {
  constructor(props){
    super(props);

    this.state = {
      mouseMoving: false,
    };

    this.setMouseMove = this.setMouseMove.bind(this);
  }

  setMouseMove(e) {
    e.preventDefault();
    this.setState({mouseMoving: true});
  }

  render() {

    const scrollButtonStyle = {
      visibility: this.state.mouseMoving ? 'visible': 'hidden', 
     };

     return (
       <div onMouseMove={e => this.setMouseMove(e)}>
         <button style={scrollButtonStyle}>Back to top</button>
         <h1>Lorem Ipsum</h1>
       </div>  
     );
  }
}

更新

根据下面的建议，我将以下 IIFE block 添加到 setMouseMove 方法(使用箭头函数进行范围访问)并且它按预期工作。感谢您的帮助!

setMouseMove(e) {
  e.preventDefault();
  this.setState({mouseMoving: true});

  let timeout;
  (() => {
    clearTimeout(timeout);
    timeout = setTimeout(() => this.setState({mouseMoving:false}), 50);
  })();
}

Answer 1

有一个超时函数，设置多少毫秒的不活动被视为“不动”。

let timeout;
let whenMouseMoves = () => {
  clearTimeout(timeout);
  timeout = setTimeout(toggleButton(), 50);
}

然后调整您认为适合您按钮的功能。显然，如果您使用此代码，则需要创建 toggleButton() 函数。