代码之家 › 专栏 › 技术社区 › Chris Allinson

VueJS setInterval clearInterval问题

clearinterval setinterval vue.js

0

Chris Allinson · 技术社区 · 5 年前

我有一个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 ,结果相同, 清除间隔

我知道这个商业逻辑是假的,但我想看看按要求工作。

我怎样才能停止循环?

0 回复 | 直到 5 年前

1

-1

Chris Allinson 5 年前

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

我的业务逻辑已经更新。它在点击prev/next时使计时器失效,然后简单地重置计时器,以便在4500ms后自动滑动。