Question

我有一个使用Sass is watching for changes. Press Ctrl-C to stop. write css/main.css write css/main.css.map Change detected to: scss/sections/_hero.scss write css/main.css write css/main.css.map的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能够正常工作。

如何停止循环？

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

我的业务逻辑已更新。单击上一个/下一个后，计时器将失效，然后只需重置计时器，以便稍后自动滑动4500ms。

VueJS setInterval clearInterval问题

1 个答案: