11

lodash のデバウンス機能とスロットル機能に本当に感謝しています。私はユースケースをよく理解していると信じており、それらを何十回も実装しています。

ただし、要件によっては、引数を持つ _.debounce 関数で重大でキャッチしにくいエラーが発生する可能性があります。それは次のとおりです。

debounceFn引数を 1 つ受け取り、デバウンス間隔が 1000 ミリ秒のデバウンス関数が呼び出されたとします。

  • 100ms:debounceFn(1)
  • 200ms:debounceFn(2)
  • 300ms:debounceFn(2)
  • 400ms:debounceFn(1)
  • 500ms:debounceFn(1)

子関数は、最終的に引数 1 で呼び出します。これは、最後の値のみを気にするサイズ変更イベントには最適ですが、引数に応じて個別のデバウンス キューが必要な場合はどうでしょうか? つまり、プロセスが引数 1 で呼び出される代わりに、プロセスが引数 1 と引数 2 で呼び出されますが、1 回だけ呼び出されます (両方ともデバウンスされるため)。

拡張されたやや複雑な例として、以下の引数の組み合わせを考えてみましょう。組み合わせによって一意のキューが生成されます。

実際の出力:

  • a: lime b: kiwi

必要な出力 (最初の 2 つの出力の順序は反転できます)

  • a: apple b: banana
  • a: apple b: orange
  • a: lime b: kiwi

var process = function(a, b) {
  document.writeln('a: ' + a + ' b: ' + b);
};

var debounceProcess = _.debounce(function(a, b) {
  process(a, b);
}, 1000);


setTimeout(function() {
  debounceProcess('apple', 'orange');
}, 100);
setTimeout(function() {
  debounceProcess('apple', 'banana');
}, 200);
setTimeout(function() {
  debounceProcess('apple', 'orange');
}, 300);
setTimeout(function() {
  debounceProcess('lime', 'kiwi');
}, 400);
<script src="https://cdn.rawgit.com/lodash/lodash/4.6.1/dist/lodash.min.js"></script>

引数を受け入れる _.debounce に関する多くの SO の質問を見てきました。それはもはや興味深い質問ではありません。つまり、個別のデバウンス キューを作成するにはどうすればよいでしょうか。

Lodash _.debounce 関数、Lodash ライブラリ、および JavaScript ネイティブ機能を使用してこれを達成するエレガントな方法 (シンプルで読みやすいコード) は何ですか? おそらく、_.debounce と _.memoize の組み合わせ (_.debounce を _.memoize でラップしようとしましたが、memoize をさらに理解するために調査する必要があります)。それとも、引数を「ハッシュ」して、引数の組み合わせごとに新しい _.debounce キューを作成する関数でしょうか?

4

1 に答える 1