Lodash _.debounce 与队列组合？

Question

有没有办法保留调用去抖函数的所有参数，将它们保存在队列中，然后触发单个批处理操作？

例如：

const debounceWithQueue = _.debounce(myFn, 1000);

debounceWithQueue(1);
debounceWithQueue(2);
debounceWithQueue(3);

一秒钟过去后，我希望我的函数myFn使用参数执行[1, 2, 3]

myFn([1, 2, 3]);

另外，如果 1 秒过去或队列达到一定大小，是否可以触发（记录 debounceWithQueue 函数被调用的次数）

Answer 1

您可以_.debounce()使用将数组保存为队列的函数进行包装。原始函数 ( fn) 被 包裹runFn，它使用队列调用原始函数，并清除队列。我们将去抖应用于runFn（debounced函数）。

当您使用debounceWithQueue函数时，会返回一个新函数。每当调用新函数时，它都会对当前参数进行排队，检查参数的长度，如果它们超过最大值，则会刷新debounced。如果队列未满，debounced则改为调用。

注意：我使用剩余参数（）收集参数...a，这意味着每次调用函数时都会将一个数组添加到args数组中。fn(args);您可以通过更改为将数组的数组展平为单个参数数组fn(args.flat());，但我认为如果原始函数可以处理数组的数组，那就更好了。

const debounceWithQueue = (fn, wait, { maxSize = Infinity, ...debounceOptions } = {}) => {
  const args = [];
  
  const runFn = () => {
    fn(args);
    
    args.length = 0;
  };
  
  const debounced = _.debounce(runFn, wait, debounceOptions);
  
  const cancel = () => {
    debounced.cancel();
    
    args.length = 0;
  };
  
  const queuedDebounce = (...a) => {
    args.push(a);
  
    if(args.length >= maxSize) debounced.flush() 
    else debounced();
  }
  
  queuedDebounce.cancel = cancel;
  
  queuedDebounce.flush = debounced.flush;
  
  return queuedDebounce;
}

const flatConsole = args => console.log(args.flat())

const fn1 = debounceWithQueue(flatConsole, 1000);
fn1('a');
fn1('b');
fn1('c');
setTimeout(() => fn1('d'), 2000);

const fn2 = debounceWithQueue(flatConsole, 1000, { maxSize: 4 });
fn2(1);
fn2(2);
fn2(3);
fn2(4);
fn2(5);
fn2(6);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>