Vue.jsでclearIntervalが動作しない

Question

clearIntervalでsetIntervalしている処理を止めたいが、うまく実装できない。

<template>
<v-app>


  <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="stop(); active();">
    ストップ
  </v-btn>


  
  </div>
  </v-app>
</template>

<script>


export default {
  name: 'App',

  components: {
    
  },


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

  },
  mounted: {
  },
  destroyed: {
    stop() {
      clearInterval(this.repeat);
    }
  }
};
</script>

処理はmethodsの中になります。

やってみたこと

・clearIntervalはsetintervalの戻り値を引数にしなければならないと出てきたため、setIntervalを変数に定義し、引数に入れる→clearInterval動作しない
https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

追記
ストップボタンを押した際にsetIntervalがとまるようにしたい

わかる方いたら回答お願いいたします。

Answer 1

    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;

これで解決しました！

Answer 2

shuffle の中の repeat は shuffle の外から参照できません。
repeat をデータの中に移動してそいつを参照するようにします。

data () {
  return {
    repeat: null
  }
},
methods: {
  shuffle () {
    this.repeat = setInterval(...
  },
  stop () {
    clearInterval(this.repeat)
  }
}

https://jsfiddle.net/po0f4L2y/

Answer 3

destroyedはコンポーネントが消えたあとなのでbeforeDestroyでクリア処理をする必要がある

Comments

[DKI]

回答ありがとうございます。
beforeDestroy: {
stop() {
clearInterval(this.repeat);
}

と変更して@clickで呼び出していますが、うまく機能しません。
具体的にはボタンのストップの表示も変更されず、setIntervalも止まりません。
beforeDestroyの書き方が間違っているのでしょうか？？

[DKI]

methodsの中にbeforeDestroyを記載するのですね。
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() {
clearInterval(this.repeat);
this.random_number = Math.floor(Math.random() * this.message.length);
console.log("reload");
}

このようにして、btnで@clickで呼び出しましたが、止まりませんでした、、、

[mikkame]

関数の呼び出し方がおかしいですよね。beforeDestroyはmethodsの中じゃないですよ

[DKI]

そうなんですか！すみません。
methodの外にmethodsと同じように定義すれば良いでしょうか？
beforeDestroy: {
stop() {
clearInterval(this.repeat);
this.random_number = Math.floor(Math.random() * this.message.length);
console.log("reload");
}
}

こんな感じに書いてみましたが、うまくいきませんでした。

ここの記載はどこがおかしいでしょうか？？

参考
https://b1tblog.com/2019/10/18/vue-lifecycle/

[DKI]

また、思ったのですが、clearIntervalも結局ボタンを押した際に実行するため、ライフサイクルはあまり関係ないのではないでしょうか？？

methodsで記載して、ボタンを押した際に実行されるようにすれば問題ないかと思いました。

その方法でも実装できてはいないですが、beforeDestroyが問題ではない気がしました。

[mikkame]

stop() {
// do something
}

って関数の実行じゃないですよね。オブジェクトに対しての関数の定義ですよね

[DKI]

はい、、
つまりどのように書けば良いのでしょうか？？？

[DKI]

https://stackoverflow.com/questions/44427686/clear-interval-doesnt-work-in-vue/57845119

スタックオーバーフロウを調べた結果、やはりmethods内に記載していけばいい気がします。
この記事の通りsetintervalを変数として定義しているにもかかわらず動かないのが不思議です、、、

[DKI]

https://stackoverflow.com/questions/15995178/clearinterval-not-working

[mikkame]

> beforeDestroy: {
> stop() {
> clearInterval(this.repeat);
> }

こうやって書いたらbeforeDestroyというプロパティにstopというプロパティの関数を追加する
ってことですよね。beforeDestroyはオブジェクトではなく、Functionである必要があると思うのですが？

[DKI]

ありがとうございます！
beforeDestroy: function(){
const self = this
clearInterval(self.repeat);
this.random_number = Math.floor(Math.random() * this.message.length);
console.log("reload");
}

このように設定するということでしょうか？？
この際stopボタンが押された時にbeforeDestroyを起動するにはどう処理を書けば良いでしょうか？

[mikkame]

そもそもなんですが、コンポーネントが削除された時にタイマーを止めたいってわけじゃなかったんですか？
ちょっと私には難しいのでこれ以上のコメントは辞めます

[DKI]

はい！ストップボタンを押した際にsetIntervalが止まるようにしたいです