Is there a way to keep all the arguments the debounced function has been called with, keep them in a queue and then fire a single batch action ?

For example:

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

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

and after one second has passed I want my function myFn to be executed with an argument [1, 2, 3]

myFn([1, 2, 3]);

Also, is it possible to fire if either 1 second has passed OR the queue has reached a certain size (keeping count of how many times the debounceWithQueue function has been called

Is there a way to keep all the arguments the debounced function has been called with, keep them in a queue and then fire a single batch action ?

For example:

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

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

and after one second has passed I want my function myFn to be executed with an argument [1, 2, 3]

myFn([1, 2, 3]);

Also, is it possible to fire if either 1 second has passed OR the queue has reached a certain size (keeping count of how many times the debounceWithQueue function has been called

• javascript
• queue
• lodash
• debouncing

1 Answer 1

You can wrap _.debounce() with a function that holds an array as a queue. The original function (fn) is wrapped by runFn, which calls the original function with the queue, and clear the queue. We apply debounce to runFn (the debounced function).

When you use debounceWithQueue on a function, a new function is returned. Whenever the new function is called, it queues the current arguments, checks the length of the arguments, and if they are over the maximum, it flushes debounced. If the queue is not full, debounced is called instead.

Note: I collect the arguments using rest params (...a), which means that every call to the function, adds an array to args array. You can flatten the array of array to a single array of arguments, by changing fn(args); to fn(args.flat());, but I think that it's better if the original function can handle the array of arrays.

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./ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>