update throttle

src/config.ts

@@ -130,7 +130,7 @@ export class Config {
       tableRef: createRef(),
       width: '100%',
       height: 'auto',
-      processingThrottleMs: 50,
+      processingThrottleMs: 100,
       autoWidth: true,
       style: {},
       className: {},

src/util/throttle.ts

@@ -2,29 +2,34 @@
  * Throttle a given function
  * @param fn Function to be called
  * @param wait Throttle timeout in milliseconds
- * @param leading whether or not to call "fn" immediately
  * @returns Throttled function
  */
-export const throttle = (fn: (...args) => void, wait = 100, leading = true) => {
-  let inThrottle: boolean;
-  let lastFn: ReturnType<typeof setTimeout>;
-  let lastTime: number;
+export const throttle = (fn: (...args) => void, wait = 100) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  let lastTime = Date.now();
+
+  const execute = (...args) => {
+    lastTime = Date.now();
+    fn(...args);
+  };
 
   return (...args) => {
-    if (!inThrottle) {
-      if (leading) {
-        fn(...args);
-      }
-      lastTime = Date.now();
-      inThrottle = true;
+    const currentTime = Date.now();
+    const elapsed = currentTime - lastTime;
+
+    if (elapsed >= wait) {
+      // If enough time has passed since the last call, execute the function immediately
+      execute(args);
     } else {
-      clearTimeout(lastFn);
-      lastFn = setTimeout(() => {
-        if (Date.now() - lastTime >= wait) {
-          fn(...args);
-          lastTime = Date.now();
-        }
-      }, Math.max(wait - (Date.now() - lastTime), 0));
+      // If not enough time has passed, schedule the function call after the remaining delay
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+
+      timeoutId = setTimeout(() => {
+        execute(args);
+        timeoutId = null;
+      }, wait - elapsed);
     }
   };
 };

src/view/container.tsx

@@ -35,7 +35,7 @@ export function Container() {
       log.error(e);
       dispatch(actions.SetDataErrored());
     }
-  }, config.processingThrottleMs, false);
+  }, config.processingThrottleMs);
 
   useEffect(() => {
     // set the initial header object

tests/jest/util/throttle.test.ts

@@ -0,0 +1,69 @@
+import { throttle } from '../../../src/util/throttle';
+
+const sleep = (wait: number) => new Promise((r) => setTimeout(r, wait));
+
+describe('throttle', () => {
+  it('should throttle calls', async () => {
+    const wait = 100;
+    const fn = jest.fn();
+    const throttled = throttle(fn, wait);
+
+    throttled('a');
+    sleep(wait - 5)
+    throttled('b');
+    sleep(wait - 10)
+    throttled('c');
+
+    await sleep(wait);
+
+    expect(fn).toBeCalledTimes(1);
+    expect(fn).toBeCalledWith(['c']);
+  });
+
+  it('should execute the first call', async () => {
+    const wait = 100;
+    const fn = jest.fn();
+    const throttled = throttle(fn, wait);
+
+    throttled();
+
+    await sleep(wait);
+
+    expect(fn).toBeCalledTimes(1);
+  });
+
+  it('should call at trailing edge of the timeout', async () => {
+    const wait = 100;
+    const fn = jest.fn();
+    const throttled = throttle(fn, wait);
+
+    throttled();
+
+    expect(fn).toBeCalledTimes(0);
+
+    await sleep(wait);
+
+    expect(fn).toBeCalledTimes(1);
+  });
+
+  it('should call after the timer', async () => {
+    const wait = 100;
+    const fn = jest.fn();
+    const throttled = throttle(fn, wait);
+
+    throttled();
+    await sleep(wait);
+
+    expect(fn).toBeCalledTimes(1);
+
+    throttled();
+    await sleep(wait);
+
+    expect(fn).toBeCalledTimes(2);
+
+    throttled();
+    await sleep(wait);
+
+    expect(fn).toBeCalledTimes(3);
+  });
+});