Vue.js / JavaScriptでスロットル(throttle)処理を実装する
 Author: 水卜

スロットルとは何か、なぜ必要なのか

スロットル処理とは、絶えず流れてくるデータを一定間隔で間引く処理のこと。

60fpsのVideo Streamで毎フレーム顔認証を行うとすると、1秒間に60回、認証結果を取得することになる。

しかし、これを全て収集して検証するのは効率的ではない。

わずか1秒の間に何度も認証結果が変わるとは考えづらく、流石に60は多すぎる。

60回分の認証結果を分析するにしても、1秒のなかで60回認証するより、6秒で60回にするなど、時間軸に幅を持たせた方が顔や光の変化を吸収しやすく、データの質向上が望める。

そこで適度にデータを間引くスロットル処理が必要なのである。

サンプルコード

Vue.jsのコンポーネントで使うため以下のように実装したが、JavaScriptはもちろん他の言語でも応用できる。

data () {
  return {
    lastTimePush: null,
    results: []
  }
},
methods: {
  pushSleepDetectResult (label, interval = 200) {
      if (!this.lastTimePush) {
        this.lastTimePush = new Date().getTime() - interval
      }
      if ((this.lastTimePush + interval) <= new Date().getTime()) {
        this.lastTimePush = new Date().getTime()
        this.results.push(label)
      }
    },
}