javascript: en vue.js clearInterval no se usa

Quiero detener el proceso de setInterval con clearInterval, pero no puedo implementarlo bien.

código

<template>  
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <h1 class="title font-weight-bold mb-3">今日のオカズに迷った時に、ルーレットで決めよう！</h1>
      </v-col>

      <v-col
        class="mb-5"
        cols="12"
      >
        <h2 v-if="random_number == null">
          今日のオカズは何にしようか？
        </h2>
        <h2 v-else>
          {{ message[random_number] }}
        </h2>
      </v-col>

      <v-col
        class="mb-5"
        cols="12"
      >
      <v-layout justify-center>
        <v-avatar
          size="100%"
        >
        <v-img
          max-width="100"
          max-height="100"
          :src="img[random_number]"
        ></v-img>
          
        </v-avatar>

      </v-layout>
      </v-col>
    </v-row>

    <v-row
    justify="center"
    align-content="center"
    >

    
    <v-col
        class="mb-5"
        cols="12"
        
    >
    <v-layout justify-center>
      <v-btn
        v-if="isActive == true"
        class="pa-5 ml-3"
        depressed
        color="blue lighten-4"
        @click="shuffle(); active();">
        スタート
      </v-btn>

      <v-btn
        v-else
        class="pa-5 ml-3"
        depressed
        color="red lighten-4"
        @click="reload(); active();">
        ストップ
      </v-btn>
    </v-layout>
    </v-col>
    </v-row>
  </v-container>
</template>

<script>


export default {
  name: 'Main',

  data: () => ({
    message: [
      '桜空もも',
      '安齋らら',
      '三上悠亜'
      ],
    img: [
      require('../assets/img/sakura_momo4.jpg'),
      require('../assets/img/anzai_rara2.jpg'),
      require('../assets/img/mikami_yua.jpg')
      ],
    random_number: null,
    isActive: true
  }),
  methods: {
    reload(){
      const self = this
      clearInterval(self.repeat);
      console.log("reload");
      
    },
    active(){
      this.isActive = !this.isActive;
    },
    shuffle(){
      var repeat = setInterval(function loop() {
        this.random_number = Math.floor(Math.random() * this.message.length);
      }.bind(this), 100);
      repeat;
    },

  },
    beforeDestroy: {
      stop() {
        const self = this
        clearInterval(self.repeat);
        this.random_number = Math.floor(Math.random() * this.message.length);
        console.log("reload");
        }
      }
};
</script>

Lo que probé Consulte el artículo que apareció en Stack Overflow

・Definir intervalo establecido como repetición variable

→Javascript clearInterval no detiene setInterval

pero no funciona

¿Por qué?

Estás borrando el intervalo con clearInterval(self.repeat) pero configurándolo con var repetir = setInterval() ....intenta cambiarlo a this.repeat = setInterval()

- Michal Levý

28 de marzo de 2021 a las 9:12

------------------------------------

Estás llamando a clearInterval(self.repeat), pero en realidad no estás almacenando nada en self.repeat.

Intenta cambiar esto

shuffle(){
    var repeat = setInterval(function loop() {
        this.random_number = Math.floor(Math.random() * this.message.length);
    }.bind(this), 100);
    repeat;
},

a esto

shuffle(){
    this.repeat = setInterval(function loop() => {
        this.random_number = Math.floor(Math.random() * this.message.length);
    }.bind(this), 100);
},

------------------------------------

    var repeat = setInterval(function loop() {
        if(this.isActive == false){
          this.random_number = Math.floor(Math.random() * this.message.length);
        }else{
          clearInterval(repeat);
        }
        }.bind(this), 100);
        repeat;

¡Es correcto!

Compartir mejorar esta respuestaFollow answered

Mar 29, 2021 at 10:06

community wiki

D K