¿Hay alguna manera de mantener todos los argumentos con los que se ha llamado a la función rebotada, mantenerlos en una cola y luego activar una sola acción por lotes?
Por ejemplo:
const debounceWithQueue = _.debounce(myFn, 1000); debounceWithQueue(1); debounceWithQueue(2); debounceWithQueue(3); y después de que haya pasado un segundo, quiero que mi función myFn se ejecute con un argumento [1, 2, 3]
myFn([1, 2, 3]);Además, ¿es posible disparar si ha pasado 1 segundo O si la cola ha alcanzado un cierto tamaño (llevando la cuenta de cuántas veces se ha llamado a la función debounceWithQueue)
Puede envolver _.debounce() con una función que contiene una matriz como una cola. La función original ( fn ) está envuelta por runFn , que llama a la función original con la cola y borra la cola. Aplicamos antirrebote a runFn (la función debounced ).
Cuando usa debounceWithQueue en una función, se devuelve una nueva función. Cada vez que se llama a la nueva función, pone en cola los argumentos actuales, verifica la longitud de los argumentos y, si están por encima del máximo, vacía los debounced . Si la cola no está llena, se llama a debounced en su lugar.
Nota : Recojo los argumentos usando rest params ( ...a ), lo que significa que cada llamada a la función agrega una matriz a la matriz args . Puede aplanar la matriz de matriz a una sola matriz de argumentos, cambiando fn(args); a fn(args.flat()); , pero creo que es mejor si la función original puede manejar la matriz de matrices.
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>