An implementation of a debounced chunked async queue. An async function may be called many times over some period of time. We want to first debounce the calls to the function and batch up all those arguments into one argument. Secondly all executions of that async function should be serialized in a FIFO manner.

debouncedChunkedQueue.ts

export const debouncedChunkedQueue = <T>(
  fn: (items: T[]) => Promise<void> | void,
  delay = 1000
) => {
  let items: T[] = []
  let started = false
  const push = (item: T) => {
    items.push(item)
    if (!started) start()
  }
  const start = async () => {
    started = true
    while (items.length) {
      await sleep(delay)
      const chunk = items.concat()
      items = []
      await fn(chunk)
    }
    started = false
  }
  return { push }
}

const sleep = (delay?: number) => new Promise(r => setTimeout(r, delay || 1000))

usage.ts

const test = async () => {
  console.clear();
  console.log("=== start test ===");
  let i = 0;
  const fetchItems = (items: number[]) => {
    console.log(`fetchItems`, items);
    return sleep(1000) as Promise<void>;
  };
  const chunked = debouncedChunkedQueue(fetchItems, 200);
  chunked.push(i++);
  chunked.push(i++);
  await sleep(200); // 0,1 batched together as the debounce delay is reached
  chunked.push(i++);
  chunked.push(i++);
  await sleep(200);
  chunked.push(i++);
  chunked.push(i++);
  // 2,3,4,5 all executed together because even though the debounce was reached after 2,3
  // the perform function is still executing so the queue waits for it to complete
};
test();