清除另一个函数 vue js 的间隔

Question

我很困惑如何在我的 vue 文件中添加一个 set Interval 变量 myTimer = setInterval(function, time)。我的程序的目标是每 3 秒更改 number 变量，以访问我创建的对象以让它显示不同的 background images 但我也有 2 buttons 可以 navigate 也通过背景。

这是我的模板代码

<div class="background" :style="{backgroundImage: `url(${Images[`${number}`].picture})`}">
   <div class="content_container">
      <div v-on:click="prev" class="prevButton"><p>&lt;</p></div>
         <div class="title_container">
            <div class="theTitle"><p>{{Images[`${number}`].Title}}</p></div>
         </div>
      <div v-on:click="next" class="nextButton"><p>&gt;</p></div>   
   </div>
</div>

这是我设置的间隔代码

export default {
  data: () => ({
     number: 0,
     myTimer     
  }),
  mounted:function() {
    this.$nextTick(() => {
      this.timer();
    });
  },
  methods:{ 
    timer: function() {
      var myTimer = setInterval(this.counter, 3000);
  },
  counter:function(){
     if(this.number >= (this.Images.length -1)){
        this.number = 0;
     }
     else{
        this.number +=1;
     }
     },
     next()
     {
        clearInterval(this.myTimer)      
        if(this.number >= (this.Images.length -1)){
           this.number = 0;
         }
        else{
           this.number +=1;
         }
     },

我想 clearInterval 在 next() 函数中如何从另一个函数访问变量。

Answer 1

您的 myTimer 需要在此上下文中。

export default {
  data: () => ({
    number: 0,
    myTimer: 0, // init myTimer
  }),
  mounted: function () {
    this.$nextTick(() => {
      this.timer();
    });
  },
  methods: {
    timer: function () {
      this.myTimer = setInterval(this.counter, 3000); // in this.myTimer
    },
    counter: function () {
      if (this.number >= this.Images.length - 1) {
        this.number = 0;
      } else {
        this.number += 1;
      }
    },
    next() {
      clearInterval(this.myTimer); // clear
      if (this.number >= this.Images.length - 1) {
        this.number = 0;
      } else {
        this.number += 1;
      }
      this.timer(); // start next
    },
  },
};

清除另一个函数 vue js 的间隔

clear interval on another function vue js

javascript

setinterval

vue.js