7. leading & trailingをサポートするdebounce()を実装する

JavaScriptLodash
お役に立つのか?

少し工夫が必要  - accepted / - tried

こちらは6. debounce()を実装するの続きで、そちらを先に完了してください。

この問題では、増強したdebounce() を実装することが求められます。第三引数option: {leading: boolean, trailing: boolean}をサポートしてください。

  1. leading: すぐ実行するか
  2. trailing: 遅延後に実行するか

6. debounce()を実装するはデフォルトの{leading: false, trailing: true}になります。

説明

いつもの3ユニットの例をみましょう

─A─B─C─ ─D─ ─ ─ ─ ─ ─ E─ ─F─G

{leading: false, trailing: true}でdebounceしたら、こうなる

─ ─ ─ ─ ─ ─ ─ ─D─ ─ ─ ─ ─ ─ ─ ─ ─ G

{leading: true, trailing: true}なら

─A─ ─ ─ ─ ─ ─ ─D─ ─ ─E─ ─ ─ ─ ─ ─G

{leading: true, trailing: false}の場合は

─A─ ─ ─ ─ ─ ─ ─ ─ ─ ─E

{leading: false, trailing: false}だったら、無論、何も起こらない

補足

  1. 上記のスペックに従ってください。 lodash.debounce()と完全に一緒ではありません。
  2. window.setTimeoutwindow.clearTimeoutは精確ではないから、入力したコードをジャッジするときに、他の実装に入れ替えられます。interfaceが一緒にで、気にしなくて良い。

概ね以下のようにジャッジされます。

let currentTime = 0

const run = (input) => {
  currentTime = 0
  const calls = []

  const func = (arg) => {
     calls.push(`${arg}@${currentTime}`)
  }

  const throttled = throttle(func, 3)
  input.forEach((call) => {
     const [arg, time] = call.split('@')
     setTimeout(() => throttled(arg), time)
  })
  return calls
}

expect(run(['A@0', 'B@2', 'C@3'])).toEqual(['A@0', 'C@3'])

30分間以内で解いてみて

ディスカス(36)