Nuxt Vue 最後のclickからｎ秒待ってから処理をする関数の書き方でこまった。

nuxtで最後にボタンを押して５秒待ってから処理を開始するプログラムを書こうと思ったのですが、以下のコードではうまくいきません。
console.log(date, "date");でログが終わってしまいます。
dataの中身を変更してしまっているので再レンダリングされてしまっているのが原因かと思ったのですが、回避方法が思いつきませんでした。

<template>
  <div id="app">
    <button @click="waitFunc">push</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      start: "",
      started: false,
      timer: 0,
      count: 0,
      PassageID: "",
    };
  },
  methods: {
    waitFunc: function () {
      this.count++;
      this.setStart();
      console.log("pushed!", this.start);
      if (!this.started) this.startManeger();
    },
    setStart: function () {
      this.start = new Date();
      this.timer = 0;
    },
    startManeger: function () {
      console.log("started maneger");
      this.PassageID = setInterval(this.detector(), 20);
    },
    detector: function () {
      let date = (new Date() - this.start) / 1000;
      console.log(date, "date");
      let time = this.timer + 1;
      if (date === time) {
        this.timer++;
        console.log(this.timer, "timer");
      }
      if (this.timer >= 5) {
        console.log("5sec");
        //押されず５秒経過
        clearInterval(this.PassageID);
        this.PassageID = "";
        this.timer = 0;
        //send count
        this.count = 0;
        this.start = "";
        this.started = false;
      }
    },
  },
};
</script>

行動規範の内容に同意します

回答2件

ベストアンサー

色々突っ込みどころがあるので、順を追って説明します。

まず、setIntervalを多重起動しないようにthis.startedを使って判定しているようですが、
this.startedがtrueになるタイミングが存在しません。
ケアレスミスなのでしょうが、念の為。

次に、setIntervalの第一引数に渡すのは関数です。
元のコードでは関数を実行した戻り値(undefined)を渡してしまっています。
これだとthis.detectorが一回実行されるだけで、定期実行はされません。

これを踏まえて、startManagerを修正して下さい。

javascript
1startManeger: function ()
2{
3    console.log("started maneger");
4    this.started = true;
5    this.PassageID = setInterval(this.detector, 20);
6},

setIntervalで、必ず指定した間隔で実行される事を期待しないで下さい。何かの拍子で普通にずれます。
秒数の比較は整数に直してからやりましょう。
あと、経過秒数を入れる変数名にdateというのはさすがに変では？

javascript
1detector: function ()
2{
3    let date = Math.floor( (new Date() - this.start) / 1000 );
4    ...

以上です。

投稿2021/01/27 00:58

編集2021/01/27 01:04

AT_2nd

総合スコア266

MOTOMUR

2021/01/27 01:54

数多くのご指摘ありがとうございます。無事、動作するようになりました。

行動規範の内容に同意します

setTimeoutを利用して、5秒後に処理を実行するのはいかがでしょうか？

Javascript
1  data() {
2    return {
3      timeoutID: ''
4    }
5  },
6  methods: {
7    waitFunc() {
8      clearTimeout(this.timeoutID)
9      this.timeoutID = setTimeout(() => {
10        // 5秒後に実行したい処理を記述
11      }, 5000);
12    }
13  }