問題

ユーザーのフォーム入力に対してそこそこ高コストな処理（ファイルを読み込んでcanvasに描画,結果をimageとしてプレイビュー表示)を行う必要があった
フォームの変更(inputイベント)に対して即座に描画関数を呼び出すと高負荷でフォームの変更を妨げてしまった

対処

フォームの変更から一定時間後に高コストな関数を実行させるようスケジュールし,ディレイ中にフォームが更新され再度イベントが起きたらスケジュールをキャンセルし再度スケジュールし直す.
これで短時間に何度もフォームが更新されても一度しか関数は実行されない.

コード

setTimeoutとclearTimeoutでスケジューリングを行う.
promiseを使ったコードは勉強不足ですぐに書けなかったので調べておきたい.

// フォームの入力が変わると呼ばれる関数.
function (val, old) {
  if (val === old) {
    return
  }
  const highCostFunc = (val) => {
    // 新しい値を受け取って処理を行う高コストな関数.
  }
  if (this._timeout) {
    clearTimeout(this._timeout)
  }
  const delay = 200
  this._timeout = setTimeout(highCostFunc(val), delay)
}

書いてみるとなんともないコードだったのですがすぐに書くことが出来なかったので備忘録がてら記載させて頂きます.