7. leading & trailingをサポートするdebounce()を実装する
シェアしよう
少し工夫が必要 - accepted / - tried
こちらは6. debounce()を実装するの続きで、そちらを先に完了してください。
この問題では、増強したdebounce()
を実装することが求められます。第三引数option: {leading: boolean, trailing: boolean}
をサポートしてください。
- leading: すぐ実行するか
- 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}
だったら、無論、何も起こらない
補足
- 上記のスペックに従ってください。
lodash.debounce()
と完全に一緒ではありません。 window.setTimeout
とwindow.clearTimeout
は精確ではないから、入力したコードをジャッジするときに、他の実装に入れ替えられます。interfaceが一緒にで、気にしなくて良い。
概ね以下のようにジャッジされます。
let currentTime = 0const 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'])