javascript - Lodash _.debounce with queue combination? - Stack Overflow

admin管理员组

文章数量:1025206

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

Share Improve this question Follow edited Mar 18, 2022 at 14:56 entropyfeverone asked Mar 18, 2022 at 14:50 entropyfeveroneentropyfeverone 1,63233 gold badges1111 silver badges2727 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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>

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

Share Improve this question Follow edited Mar 18, 2022 at 14:56 entropyfeverone asked Mar 18, 2022 at 14:50 entropyfeveroneentropyfeverone 1,63233 gold badges1111 silver badges2727 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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>

本文标签： javascriptLodash debounce with queue combinationStack Overflow