Lodash _.debounce 与队列组合？

Question

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

例如：

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。

注意：我使用rest params (...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>

Lodash _.debounce 与队列组合？

Lodash _.debounce with queue combination?

javascript

queue

lodash

debounce