diff --git a/tsconfig.json b/tsconfig.json index 324a33791..d25cf103f 100644 --- a/tsconfig.json +++ b/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/**/*" - ] -} \ No newline at end of file + "compilerOptions": { + "target": "es5", + "allowJs": true, + "lib": ["ES2021", "DOM"], + "jsx": "react", + "moduleResolution": "node", + "outDir": "./dist", + "strict": true, + "esModuleInterop": true, + "noImplicitThis": false + }, + "include": ["vis/**/*"] +} diff --git a/vis/js/HeadstartRunner.tsx b/vis/js/HeadstartRunner.tsx index ee9d3ac0c..cfd282a8b 100644 --- a/vis/js/HeadstartRunner.tsx +++ b/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; diff --git a/vis/js/templates/filtersort/SearchBox.tsx b/vis/js/templates/filtersort/SearchBox.tsx index e6779c3c9..25aee63e4 100644 --- a/vis/js/templates/filtersort/SearchBox.tsx +++ b/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); } diff --git a/vis/js/utils/debounce.ts b/vis/js/utils/debounce.ts index 51ffbb3d5..dbed3d1f2 100644 --- a/vis/js/utils/debounce.ts +++ b/vis/js/utils/debounce.ts @@ -1,22 +1,29 @@ -// @ts-nocheck +export const debounce = void>( + func: T, + delay = 300, + immediate = false +): ((...args: Parameters) => void) => { + let timeoutId: ReturnType | 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) { + 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); + } }; -} +};