Nuxt中如何处理setInterval

Question

我的组件中有一个计时器，它是运行 setInterval，它在 mounted() 组件中启动。

假设此组件位于 http://localhost:3000/some-route。
现在我该怎么做 clearInterval() 每当我去另一条路线时 http://localhost:3000/ 因为我想停止计时器。
我已经使用 unmounted() 但是当你转到不同的路径时，组件不会卸载但是如果我转到相同的路径 (/some-route)，setInterval 会在组件安装时再次运行再次.

那么，每次走不同的路线，如何清除间隔呢？

Answer 1

我不得不做一次，它有点棘手，因为它的范围和它与 this 交互的方式（基本上是箭头函数）。最后，我还需要它在全球范围内可用，所以我将它与 Vuex 配对使用，但你完全可以在具有变量上层范围的组件中使用它。

这是我使用过的代码示例

actionSetPolling({ state, dispatch }) {
  try {
    const myPolling = setInterval(async function () {
      if (someVariable !== 'COMPLETED') {
        // do stuff
      } else if (conditionToStop) {
        // this is facultative, but can be done here so far too
        window.clearInterval(myPolling)
      }
    }, 2000)
    dispatch('setPollingId', myPolling)
  } catch (error) {
    console.warn('error during polling', error.response)
    window.clearInterval(state.pollingId)
  }
}

setPollingId 是一个设置 pollingId 突变的动作，这样我就可以在全球范围内跟踪它。

您可以在卸载组件时使用相同的方法

beforeDestroy() {
  window.clearInterval(state.pollingId)
},

不确定这是否是最好的做事方式，但 setInterval 就其本质而言，IMO 开箱即用，笨拙且笨拙，尤其是在 SPA 中。

Nuxt中如何处理setInterval

How to handle setInterval in Nuxt

javascript

vue.js

nuxt.js

setinterval