Add items with a throttled effect of applying the items.

collectAndFlush.ts

/**
 * Add items with a throttled effect of applying the items.
 * We might use this to collect items and then apply them in batches like for
 * search results and timeline items.
 */
export function collectAndFlush<T>(
  then: (items: T[]) => void,
  // 60 fps
  throttleMs: number = 17,
): {
  add(item: T): void;
  flush(): void;
  cancel(): void;
} {
  let cancelled = false;
  let items: T[] = [];
  let timeout: number | null = null;
  return {
    cancel() {
      clearTimeout(timeout);
      timeout = null;
      cancelled = true;
    },
    flush() {
      if (items.length === 0) return;
      if (timeout !== null) {
        clearTimeout(timeout);
        timeout = null;
      }
      then(items);
      items = [];
    },
    add(item: T) {
      items.push(item);
      if (timeout === null) {
        timeout = setTimeout(() => {
          if (cancelled) return;
          then(items);
          items = [];
          timeout = null;
        }, throttleMs);
      }
    },
  };
}