Timer creates new instances when switching Tabs

[niv-Inator]

"vue-timers": "2.0.4",
"vue": "2.6.11",
"bootstrap-vue": "2.15.0"

We have a Component (resultViewer) which loads Data with a timer, the timer is defined like this

  timers: {
    autoRefreshTimerCallback: { time: 5000, repeat: true, isSwitchTab: true, immediate: false }
  },

and is started / stopped in a vue-watch and in vue-deactivated, vue-activated

activated () {
  if (this.isAutoRefreshActive) {
    this.$timer.start('autoRefreshTimerCallback')
  }
},
deactivated () {
  this.$timer.stop('autoRefreshTimerCallback')
},
 watch: {
    isAutoRefreshActive: function (val) {
      if (val) {
        this.$timer.start('autoRefreshTimerCallback')
      } else {
        this.$timer.stop('autoRefreshTimerCallback')
      }
    }
}

This Component is used in several Pages and when we switch between those Pages with a running timer it creates a new timer instance.

Here is an example of a console log were we have a resultViever instance with ID 0 and one with ID 3.
We start on the page with resultViever ID 0, where the timer instance is 33. We then switch to the page with resultViever ID 3, where the timer instance is 231. We deactivate the timer on this page (ID 3) and go back on the first page . Now on the first page (ID 0) the timer instance is 334. Now going again on page 2 (ID 3) the timer instance is 418 and is active even though we deactivated it. This timer now goes on indefinitely.

resultsViewer/postRefreshGraph[0] active Options: Auto Refresh
resultsViewer/postRefreshGraph[0] active Options: Auto Refresh

Timer instance: 33 isRunning: true
resultsViewer/postRefreshGraph[0] active Options: Auto Refresh

resultsViewer/postRefreshGraph[3] active Options:

loading data:
spectrum:recent(10) jcbLog.js:135

resultsViewer/postRefreshGraph[3] active Options:

loading data:
spectrum:recent(10) jcbLog.js:135

resultsViewer/postRefreshGraph[3] active Options: Auto Refresh
Timer instance: 231 isRunning: true
resultsViewer/postRefreshGraph[3] active Options: Auto Refresh
resultsViewer/postRefreshGraph[3] active Options:

loading data:
spectrum:recent(10) jcbLog.js:135

resultsViewer/postRefreshGraph[0] active Options: Auto Refresh
Timer instance: 334 isRunning: true
resultsViewer/postRefreshGraph[0] active Options: Auto Refresh
Timer instance: 334 isRunning: true
resultsViewer/postRefreshGraph[0] active Options: Auto Refresh

resultsViewer/postRefreshGraph[3] active Options:
Timer instance: 418 isRunning: true

loading data:
spectrum:recent(10) jcbLog.js:135

Timer instance: 418 isRunning: true
resultsViewer/postRefreshGraph[3] active Options:

[masongzhi]

what is the code that your timer component used in several Pages, did you use keep-alive to control several Pages?

if you did not use keep-alive, timer component would create instance when you switch page.

[niv-Inator]

what is the code that your timer component used in several Pages, did you use keep-alive to control several Pages?

if you did not use keep-alive, timer component would create instance when you switch page.

We have a keep-alive active in the App.vue