Javascript 设置通过状态（或非全局）存储和清除的超时计时器

我试图在用户将鼠标移到图标上一秒钟后打开弹出窗口，以防止意外触发

我发现实现这一点的唯一方法是在处理程序函数上使用setTimeout。问题是，要使其工作，我必须向React组件声明一个全局变量。这是可行的，但我不希望以这种方式使用全局变量

let timer; 

export default class Users extends Component {
  state = {
      popoverOpen: false,
    };


  handleMouseOver = (e) => {
    e.stopPropagation();
    switch (e.type) {
      case 'mouseover':
        clearTimeout(timer);
        timer =
          setTimeout(() => {
            this.setState({
              popoverOpen: true
            });
          }, 1000);
        break;
      case 'mouseout':
        clearTimeout(timer);
        break;
      default:
        console.log(e.type);
        break;
    }
  };

是否有一种方法可以使用本地状态设置和清除超时？如果没有，是否有一种更好的方法可以逃避我

---

谢谢。

使用上层类存储计时器和状态数据，它看起来像：

A类{
构造函数（）{
this.state=false；
}
func（）{
如果（本州）{
log（'push the call'）；
clearTimeout（this.timer）；
}否则{
log（“初始调用”）；
}
this.state=true；
this.timer=setTimeout（（）=>{
this.state=false；
log（“调用结束”）；
}, 500);
};
};
常数a=新的a（）；
a、 func（）；
对于（设i=0；i<5；i+=1）{
setTimeout（（）=>a.func（），i*200）；
}

全局变量在哪里？为什么要使用开关盒而不是onMouseOut/onMouseOver？您可以使用

this.timer

哦，这是

timer

，有什么特殊原因不将其放在实例（this.timer）上吗？如果我将其放在实例中，则此代码的执行方式会触发多个事件（我想你的意思是在洗手间里面）它没有清除计时器，尽管最后一个事件是mouseout事件，但仍然会打开弹出窗口。希望这有意义。@Artemirchenko非常感谢它的工作。我不知道将计时器设置为这个。计时器会起作用。我甚至不确定为什么它会起作用，但我将尝试找出它。还有很多东西要学习。完美的这个。计时器起作用了很好，我不敢相信我错过了。唯一的安慰是，两位高级开发人员也没有得到它。谢谢你的帮助。