概要

setIntervalで何かをリアルタイムに描画している時、リアクティブにintervalを調整する技。

例として以下。

1. bpmを調節できるメトロノーム

   setIntervalで音を鳴らす。つまみをいじるとbpmが変わる。

2. video streamを顔認識にかけ、結果をcanvasにリアルタイム描画

   デバイスごとのスペック差を考慮し、ユーザーがfpsを弄れるようなもの

サンプルコード

export default {
  name: 'HeartGraph',
  props: {
    bpm: {
      type: Number,
      default: 60
    }
  },
  data () {
    return {
      interval: null
    }
  watch: {
    bpm () {
      this.start()
    }
  },
  mounted () {
    this.start()
  },
  methods: {
    start () {
      const self = this
      if (self.interval) {
        clearInterval(self.interval)
      }
      self.interval = setInterval(() => {
        // Describe graph
      }, 60 / this.bpm * 500)
    }
  }
}

解説

bpmをpropsに持つVueコンポーネント。

bpmをウォッチしており、変化したらstartが呼ばれる。

startではintervalの初期化を行い、bpmに応じたインターバルで何らかの処理を行う。