ClearInterval js停止当前执行

Question

我有一个 Vue 2.0 应用程序，我在其中使用这一行以便每分钟调用this.refreshState() 。

this.scheduler = setInterval(() => this.refreshState(), 60 * 1000)

在代码的后面，我需要确保执行循环已停止，并且如果当前正在运行this.refreshState()的实例（来自setInterval调度程序），它也会停止（即使它正在执行操作).

到目前为止，我正在使用：

clearInterval(this.scheduler)

根据 ( https://developer.mozilla.org/en-US/docs/Web/API/clearInterval )

我遇到的问题是clearInterval是否会阻止当前执行（如果有）？ 不幸的是，我在文档中找不到答案。

仅供参考 refreshState 的代码：

refreshState: function () {
   // API call to backend
    axios.get("/api/refreshState")
       .then(response => {
            this.states = response.data.states
        })
        .catch((err) => console.log(err)
}

这是我的用例：

alterState: function (incremental_state) {
    clearInterval(this.scheduler) // ???
    axios.post("/api/alterState", incremental_state)
      .then(() => {
           this.refreshState()
           this.scheduler = setInterval(() => this.refreshState(), 60 * 1000)
        })
      .catch((err) => { console.log(error) })
}

我想确保当我退出alterState时，变量this.states考虑了增量 state 的添加。

Answer 1

从...

我想确保当我退出 alterState 时，变量this.states考虑了增量 state 的添加。

...我知道您正在后端执行更改，并且希望它反映在前端。 目前还没有发生这种情况，尽管您在从/api/alterState获得成功响应后立即调用this.refreshState() 。 ^1个

要实现此功能，仅调用this.refreshState()是不够的，因为默认情况下，您的浏览器会缓存结果（它会记住最近的调用及其结果，因此它会从缓存中提供先前的结果，而不是调用服务器再次），除非端点被专门配置为禁用缓存。

要禁用特定端点的缓存，您可以

• 配置端点（服务器端）告诉浏览器： “嘿，我的东西是时间敏感的，不要缓存它！” （不会 go 进入如何，因为我不知道你在后端使用什么技术并且它会有所不同）。 大致意思就是设置合适的响应头。
• 或者每次都使用唯一的参数调用端点。 这使得端点从浏览器的 POV “改变” ，所以它总是会从服务器请求：

  axios
    .get(`/api/refreshState?v=${Date.now()}`)
    .then...

我推荐第二个选项，它可靠、可预测并且不依赖于服务器配置。

---

而且，除非当前应用程序实例（其他用户或其他服务器脚本等）以外的其他内容对数据进行更改，否则您实际上不需要setInterval 。 我建议删除它。

但是，如果您确实有其他来源更改服务器端数据（并且您确实想要刷新它，而不管用户与应用程序的交互如何），那么您所拥有的一切都可以正常工作，甚至不需要取消现有的时间间隔更改 + refreshState() ）。 ^2个

---

¹ - 如果我误解了你的问题，那不是你的问题，请澄清你的问题，现在有点不清楚
² - 作为旁注和个人喜好，我建议将refreshState()重命名为getState()