refactor: debounce util function

tsconfig.json

@@ -1,15 +1,14 @@
 {
-    "compilerOptions": {
-        "target": "es5",
-        "allowJs": true,
-        "lib": ["ES2021", "DOM"],
-        "jsx": "react",
-        "moduleResolution": "node",
-        "outDir": "./dist",
-        "strict": true,
-        "esModuleInterop": true,
-    },
-    "include": [
-        "vis/**/*"
-    ]
-}
+  "compilerOptions": {
+    "target": "es5",
+    "allowJs": true,
+    "lib": ["ES2021", "DOM"],
+    "jsx": "react",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "noImplicitThis": false
+  },
+  "include": ["vis/**/*"]
+}

vis/js/HeadstartRunner.tsx

@@ -19,7 +19,7 @@ import { applyForce } from "./utils/force";
 import { getChartSize, getListSize } from "./utils/dimensions";
 import Headstart from "./components/Headstart";
 import { removeQueryParams } from "./utils/url";
-import debounce from "./utils/debounce";
+import { debounce } from "./utils/debounce";
 import DataManager from "./dataprocessing/managers/DataManager";
 import FetcherFactory from "./dataprocessing/fetchers/FetcherFactory";
 import handleZoomSelectQuery from "./utils/backButton";
@@ -93,7 +93,7 @@ class HeadstartRunner {
       handleZoomSelectQuery(this.dataManager, this.store, this.config);
     };
 
-    window.addEventListener("popstate", debounce(handleBackButtonClick, 300));
+    window.addEventListener("popstate", debounce(handleBackButtonClick));
   }
 
   async fetchData() {
@@ -160,10 +160,7 @@ class HeadstartRunner {
   addWindowResizeListener() {
     window.addEventListener("resize", () => {
       const chart = getChartSize(this.config);
-      const list = getListSize(
-        this.config,
-        chart.size
-      );
+      const list = getListSize(this.config, chart.size);
       this.store.dispatch(updateDimensions(chart, list));
     });
   }
@@ -195,7 +192,12 @@ class HeadstartRunner {
     elem?.dispatchEvent(event);
   }
 
-  rescaleMap(scaleBy: string, baseUnit: string, isContentBased: boolean, initialSort: string) {
+  rescaleMap(
+    scaleBy: string,
+    baseUnit: string,
+    isContentBased: boolean,
+    initialSort: string
+  ) {
     this.config.scale_by = scaleBy;
     this.config.base_unit = baseUnit;
     this.config.content_based = isContentBased;

vis/js/templates/filtersort/SearchBox.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import { Glyphicon } from "react-bootstrap";
 
-import debounce from "../../utils/debounce";
+import { debounce } from "../../utils/debounce";
 import { trackMatomoEvent } from "../../utils/useMatomo";
 
 // inspired by
@@ -15,7 +15,7 @@ class DebouncedSearchBox extends React.Component {
     };
 
     this.onChange = props.handleChange;
-    this.onChangeDebounced = debounce(props.handleChange, 300);
+    this.onChangeDebounced = debounce(props.handleChange);
     this.handleChange = this.handleChange.bind(this);
   }
 

vis/js/utils/debounce.ts

@@ -1,22 +1,29 @@
-// @ts-nocheck
+export const debounce = <T extends (...args: unknown[]) => void>(
+  func: T,
+  delay = 300,
+  immediate = false
+): ((...args: Parameters<T>) => void) => {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
 
-/**
- * Debounce any function
- * 
- * Copied from helpers.js
- */
-export default function debounce(func, wait, immediate) {
-  var timeout;
-  return function () {
-    let context = this,
-      args = arguments;
-    let later = function () {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
+  return function (...args: Parameters<T>) {
+    const context = this;
+    const isCallNow = immediate && !timeoutId;
+
+    const later = () => {
+      timeoutId = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
     };
-    let callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(later, delay);
+
+    if (isCallNow) {
+      func.apply(context, args);
+    }
   };
-}
+};