VueJS setInterval clearInterval проблема

Question

У меня есть компонент слайд-шоу VueJS, который использует setInterval.

У меня есть серьезные проблемы, просто вызов clearInterval для него!

  data() {
    return {
      slideIndex: 1,
    }
  },  
  mounted() {
    this.showSlides(this.slideIndex);
    this.startTimer();
  },
  methods: {
    // Timer
    startTimer() {
      timer = setInterval(() => {
        this.plusSlides(1);
      }, 4500);
    },
    invalidateTimer() {
      clearInterval(timer);
    },

    // Next/Prev controls
    plusSlides(n) {
      this.invalidateTimer();
      this.showSlides((this.slideIndex += n));
    },

Вызов this.invalidateTimer() ничего не делает.

Я также пытался с timer на компоненте data, тот же результат, clearInterval не имеет никакого эффекта.

Я знаю, что эта бизнес-логика является фиктивной, нопросто хотелось бы, чтобы clearInterval работал как нужно.

Как мне остановить цикл?

Answer 1

Нашли обходной путь ... вы можете оставить timer на компоненте data, определить его id, затем в invalidateTimer вы можете просмотреть каждый тайм-аут на window и найти его .. .

  data() {
    return {
      slideIndex: 1,
      timer: '',
      timerId: ''
    }
  },
  mounted() {
    this.showSlides(this.slideIndex);
    this.startTimer();
  },
  methods: {
    // Timer
    startTimer() {
      this.timer = setInterval(() => {
        this.plusSlides(1);
      }, 4500);
      this.timerId = this.timer._id
    },
    invalidateTimer() {
      var ids = window.setTimeout(function() {}, 0);
      while (ids--) {
        if (ids == this.timerId) {
          window.clearTimeout(ids);
          break;
        }
      }
    },

    // Next/Prev controls
    plusSlides(n) {
      this.invalidateTimer();
      this.startTimer();
      this.showSlides((this.slideIndex += n));
    },

Моя бизнес-логика была обновлена. Он отменяет действие таймера при нажатии кнопки «предыдущая / следующая», а затем просто сбрасывает таймер, чтобы через 4500 мс он автоматически скользил.