レッスンに戻る

遅延デコレータ

重要性: 5

f の各呼び出し毎に ms ミリ秒遅延をするデコレータ delay(f, ms) を作成してください。

例:

function f(x) {
  alert(x);
}

// ラッパーを作成
let f1000 = delay(f, 1000);
let f1500 = delay(f, 1500);

f1000("test"); // "test" は 1000ms 後に表示
f1500("test"); // "test" は 1500ms 後に表示

つまり、delay(f, ms) "ms 遅延した" f のバリアントを返します。

上のコードにおいて、f は単一引数の関数ですが、あなたの解答はすべての引数とコンテキスト this を渡すようにしてください。

テストと一緒にサンドボックスを開く

解答:

function delay(f, ms) {

  return function() {
    setTimeout(() => f.apply(this, arguments), ms);
  };

}

ここで、アロー関数がどう使われているか注意してください。ご存知の通り、アロー関数は独自の thisarguments を持ちません。なので、f.apply(this, arguments) はラッパーから thisarguments を取ります。

もし、通常の関数を渡す場合、setTimeout はそれを引数なしで、 this=window (ブラウザの場合) で呼び出します。なので、ラッパーからそれらをわすようにコードを書く必要があります。:

function delay(f, ms) {

  // setTimeout の中で、ラッパーから this と 引数を渡すための変数を追加
  return function(...args) {
    let savedThis = this;
    setTimeout(function() {
      f.apply(savedThis, args);
    }, ms);
  };

}

サンドボックスでテストと一緒に解答を開く