Как определить `setInterval` в области специфика c компонента в Vue?

Question

Я хочу запустить setInterval только в рамках определенного компонента c (ограничение для этого компонента не для всего приложения), потому что я использую режим SPA в рамках инфраструктуры Quasar.

Когда Я установил эту функцию, она запускается везде, даже если я изменил URL страницы. Кроме того, я проверил эту ссылку (как использовать setInterval в Vue компоненте) , но это был не мой ответ.

Мой пример кода:

methods:
  testInterval: function () {
    setInterval(() => this.playCMD(), 2000)
  },
  playCMD: function () {
    // Do something
    console.log('Do something')
  }

Кроме того, лучше сказать, что я хочу ограничить выполнение каких-либо действий в указанной области c в VueJs, а не во всем приложении, когда мы используем его в режиме SPA.

Answer 1

Я не использовал платформу Quasar, но вы можете попробовать следующие варианты:

1. Подписка на Vue жизненный цикл уничтожено, а затем выполнить clearTimeout.

Или

Если вы используете Vue -Router, вы можете использовать In-Component Guards , которые являются событиями при переходе к другому компоненту, которые вы можете использовать для выполнения clearTimeout.

data: () => {
    return {
        timer: null
    };
},
methods: {
    testInterval() {
        this.timer = setInterval(this.playCMD, 2000)
    }
},
beforeRouteLeave (to, from, next) {
    if(this.timer)
        clearInterval(this.timer);
    next();
}

РЕДАКТИРОВАТЬ: Спасибо @ Али Халладжи. Вы должны добавить вызов к следующей функции, чтобы выполнить конвейер, как описано здесь .

Answer 2

@ Shoejep большое спасибо, это работает. нам пришлось добавить next() функцию в beforeRouteLeave. Пожалуйста, смотрите ниже:

beforeRouteLeave (to, from, next) {
    if(this.timer)
        clearInterval(this.timer)
        next()
}

Потому что, если мы не введем next() в эту функцию, мы не сможем go к другим маршрутам.