【JavaScript】クラス（class）を使った「setInterval」と「clearInterval」によるタイマー操作（ES6,ES2015）

「2020-05-29」記載。

ES5での「setInterval」の記事は大量に見かけたのだが、ES6の規格でのクラス併用の「setInterval」の記事を見つけることができなかったので、忘備録も兼ねて記載。

○ サンプルソース

（動作チェックはしていないのであしからず）

class MainFrame{
  THandle
  tm1

  //initメソッドの呼び出しでタイマー起動
  init(){
    this.startTimer()
  }

  startTimer() {
    this.tm1 = 0
    this.THandle = setInterval(() => {
      this.onTimer()
    }, 1000)
  }
  
  stopTimer() {
    clearInterval(this.THandle);
    console.log("stop!");
  }
  
  onTimer(){
    this.tm1 += 1;
    console.log("t:"+this.tm1);
    
    if (this.tm1 >= 5) {
      this.stopTimer();
    }
  }
}

オブジェクト指向でブラウザゲームを作る際には、ほぼ必須のはずなのだが、なぜかこういったサンプルソースがネット上になかった。

(´・ω・｀)

注意点はここ。

this.THandle = setInterval(() => {
  this.onTimer()
}, 1000)

ES5風に書くと、以下のようになるのだが、

this.THandle = setInterval(this.onTimer, 1000);

ES6のクラス内でこの文を書いてしまうと、別の（？）クラスのメソッドが呼び出されて、よくわからない動作を起こす。

javascriptは、あまり理解していないので、理由は知らない。とりあえず、期待するような動作は起こさないよ、とだけ。

後続者が同じような沼にはまらないことを願う。

(´・ω・｀)ノシ

※ 追記

どうやら、JavaScriptには通常のsleep機能が無いらしく、関数の内部からThandleの更新頻度を制御することはできないっぽい。

と、いうことで、フレームレートを調整したいなら「while + 疑似sleep」の方が良さそうである。

ES2017使用。クラス内の一例：

（「loop_flag」と「stopTimerの変更」の処理は省略）

sleep(time) {
  return new Promise(function (resolve, reject) {
    window.setTimeout(resolve, time);
  });
}

async startTimer() {
  while(true){
    if (this.loop_flag == 1){
      this.onTimer()
      await this.sleep(1000)
    }else{
      break
    }
  }
}

他にも手法があるみたいなので、気になる方は「Javascript sleep」で検索してみるのが良いだろう。