I have a Vue 2.0 app in which I use this line in order to call this.refreshState() every min.

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

Later in the code I need to make sure that the execution loop is stopped and also that if there's an instance of this.refreshState() currently running (from the setInterval scheduler) it's stopped as well (even if it's in the middle of doing stuff).

So far I'm using :

clearInterval(this.scheduler)

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

The question I'm having is does clearInterval blocks the current execution if any? I can't find the answer in the doc unfortunately.

FYI the code of refreshState:

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

Here's my use case :

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) })
}

I want to make sure that when i exit alterState , the variable this.states takes into account the addition of incremental state.

CodePudding user response：

From...

I want to make sure that when i exit alterState, the variable this.states takes into account the addition of incremental state.

...I understand you're performing a change on backend and you want it reflected on frontend. And that currently that doesn't happen, although you're calling this.refreshState() right after getting a successful response from /api/alterState. ¹

To achieve this functionality, it's not enough to call this.refreshState(), because your browser, by default, caches the result (it remembers the recent calls and their results, so it serves the previous result from cache, instead of calling the server again), unless the endpoint is specifically configured to disable caching.

To disable caching for a particular endpoint, you could either

• configure the endpoint (server side) to tell browsers: "Hey, my stuff is time sensitive, don't cache it!" (won't go into how, as I have no idea what technology you're using on backend and it varies). Roughly it means setting appropriate response headers.
• or call the endpoint with a unique param, each time. This makes the endpoint "change" from browser's POV, so it's always going to request from server:

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

I recommend the second option, it's reliable, predictable and does not depend on server configuration.

And, unless something else, other than the current app instance (some other user, or other server scripts, etc...) make changes to the data, you don't actually need a setInterval. I suggest removing it.

But If you do have other sources changing server-side data, (and you do want to refresh it regardless of user interactions with the app), what you have works perfectly fine, there's no need to even cancel the existing interval when you make a change refreshState()). ²

¹ - if I misunderstood your question and that is not your problem, please clarify your question, right now it's a bit unclear
² - as side-note and personal preference, I suggest renaming refreshState() to getState()