时间戳

首页 > 解决方案 > 我可以在 React 中使用 onMouseEnter/Out 事件暂停和取消暂停 setInterval 吗？

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

问题描述

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

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

我知道这行不通。

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

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

标签： reactjssetinterval

解决方案

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

推荐阅读