如何在 Nuxt 中处理 setInterval

问题描述

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

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

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

解决方法

我不得不做一次，因为范围和它与 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 中。