我可以在 React 中使用 onMouseEnter/Out 事件暂停和取消暂停 setInterval 吗？答案

【问题标题】：Can I pause and unpause setInterval with an onMouseEnter/Out event in React?我可以在 React 中使用 onMouseEnter/Out 事件暂停和取消暂停 setInterval 吗？
【发布时间】：2020-04-25 19:09:29
【问题描述】：

我希望能够在应用程序运行时启动 setInterval，但也可以暂停它，并使用 onMouseEnter 事件重新启动 setInterval。现在，我已经在 componentDidMount 生命周期中塞入了 sendInterval：

  componentDidMount() {
    this.timer = setInterval(() => {
      this.forward();
    }, 4000);
  }

我知道这行不通。

我尝试将 setInterval 包装在 if 语句中，当我将鼠标悬停在组件上时该语句会运行，但是当组件挂载时，我没有悬停，因此它不会运行。并且 componentDidMount 只触发一次，所以我不确定如果 componentDidMount 只触发一次，我将如何暂停 setInterval。

我还尝试在 componentDidMount 之外创建一个单独的计时器函数，该函数由 componentDidMount 触发，但我基本上遇到了同样的问题。我觉得这里需要在某个地方使用递归。我不知道我会在哪里调用一个函数，该函数在除了 componentDidMount 之外的任何其他地方启动 setInterval，但是我无法再次访问它。还是我？

【问题讨论】：

这能回答你的问题吗？ Pause and resume setInterval

标签： reactjs setinterval

【解决方案1】：

您可以将 setInterval 计时器代码保留在函数中，并将计时器引用保留在类实例 (this.timer) 中。现在您可以在 componentDidMount、mouseOver 等中调用该函数。该函数必须负责根据条件参数清除/设置计时器。

【讨论】：