あるメソッドからrequestAnimationFrameで別のメソッドを繰り返す方法

requestAnimationFrameのサンプルコードは大体こんな感じで、グローバルに定義した関数の中で自分自身を引数にしてrequestAnimationFrameを呼ぶことで繰り返しをおこなっている。

function update() {
  requestAnimationFrame(update);
  console.log('update!');
}

update();

今回、あるクラスのメソッドから別のメソッドをrequestAnimationFrameで繰り返したくていろいろ試したところ、以下のようにすれば上手くいくことわかった。

class Sample {
  start() {
    const that = this;
    (function _update() {
      requestAnimationFrame(_update);
      that.update();
    }());
  }

  update() {
    console.log('update!');
  }
}

const sample = new Sample();
sample.start();

こうすれば、Sampleクラスを継承したクラスはrequestAnimationFrameを気にせずに、updateメソッドをオーバーライドして繰り返し処理を行うことができる。