Lodash _.debounce 与队列组合？

发布于 2025-01-15 06:38:09 字数 420 浏览 2 评论 0原文

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

例如：

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

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

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

myFn([1, 2, 3]);

另外，如果满足以下任一条件，是否可以触发1 秒过去了或队列已达到一定大小（记录 debounceWithQueue 函数被调用的次数

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ゞ花落谁相伴 2025-01-22 06:38:09

您可以使用将数组保存为队列的函数来包装 _.debounce()。原始函数（fn）被runFn包装，它通过队列调用原始函数，并清除队列。我们将 debounce 应用于 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>

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

回复收藏 0 原文

~没有更多了~