Vue.jsで処理を遅らせたい。

Question

前提・実現したいこと

Vue.jsで処理を遅らせたい。

Vue.jsの練習のため、html,css,js,vue,jsを用いて、麻雀の作成をおこなっています。

敵プレイヤーに牌を捨ててもらう際に、1秒ほど処理を遅らせたいのですが、うまくいかないです。
牌の描画はvuejsのfor文を用いており、dataの中の配列に牌を入れることで、牌を捨てるのを表現しようとしています。

jｓで処理をおくらせる方法をしらべ、sleep関数を作成し、組み込んでみました。しかし、Vueのdataを用い、牌を処理しているため、sleep関数の中から、dataにうまくつなぐことができませんでした。

つたない文章で申し訳ありませんが、お答えいただけるとありがたいです。よろしくお願いいたします。

発生している問題・エラーメッセージ

app.js:98 Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at app.js:98
    at waitFunc (custom.js:59)

該当のソースコード

Vue.createApp({
  data: function () {
    return {
      infos:[
      {
        kaze:"東",
        point:2500,
      },
      {
        kaze:"南",
        point:25000,
      },
      {
        kaze:"西",
        point:25000,
      },
      {
        kaze:"北",
        point:25000,
      },
      ],
      my_tehai: [],
      my_kawa : [],
      si_kawa : [],
      to_kawa : [],
      ka_kawa : [],
      doras : ["img/hai/ura.png","img/hai/ura.png","img/hai/ura.png","img/hai/ura.png"],
      turn:-1,
      isShow:false,
      my_tehai_2 : [],
    }
  },中略、
 watch: {
    turn: function(){
      var x = this.turn % 4
          switch (x){
          case 0:
            var tsumo = yama[0];
            yama.splice(0,1)
            var tsumo = "img/hai/" + tsumo + ".png"
              this.my_tehai.push(tsumo);
            break;
          case 1:
            this.my_tehai.sort()
            var tsumo = yama[0];
            yama.splice(0,1)
            var tsumo = "img/hai/" + tsumo + ".png"
ここで問題が起きていますーーー↓
            **sleep(3, function() {
            this.si_kawa.push(tsumo);
            });**
↑ーーーー
            this.turn += 1;
            break;
          case 2:
            var tsumo = yama[0];
            yama.splice(0,1)
            var tsumo = "img/hai/" + tsumo + ".png"
            this.to_kawa.push(tsumo);
            this.turn += 1;
            break;
          case 3:
            var tsumo = yama[0];
            yama.splice(0,1)
            var tsumo = "img/hai/" + tsumo + ".png"
            this.ka_kawa.push(tsumo);
            this.turn += 1;
            /*console.log(this.ka_kawa)*/
            break;
          }
    },


//sleep関数
function sleep(waitSec, callbackFunc) {
 
  var spanedSec = 0;
 
  var waitFunc = function () {
 
      spanedSec++;
 
      if (spanedSec >= waitSec) {
          if (callbackFunc) callbackFunc();
          return;
      }
 
      clearTimeout(id);
      id = setTimeout(waitFunc, 1000);
  
  };
 
  var id = setTimeout(waitFunc, 1000);
 
}


HTML
<div v-for="kawa in si_kawa" class="kawa-img-box">
 <img :src="kawa" class="img-adj">
</div>
	        <

試したこと

sleep関数を自作し、dataのsi_kawaの配列に牌を入れるのを遅らせようとしました。
しかし、sleep関数の中からdataを参照することができなく、困っています。

Answer 1

thisの参照が出来ていないのが原因かも知れません。アロー関数を使用してはどうでしょうか。

sleep(3, ()=> {this.si_kawa.push(tsumo);});

アロー関数と関数の違いとthisの評価のされ方

動作確認はできていませんが、ご参考までに。

Comments

[Austin1020]

BlueMoonさんありがとうございます！

アロー関数を試したところうまくいきました！
自身での調べが甘かったと反省してます。。
ほんとにありがとうございます！

[BlueMoon]

良かったです。お疲れ様でした。