Optimize amount of API calls

frontend/src/Throttler.ts

@@ -1,17 +1,23 @@
 export class Throttler {
     private hasBeenCalledWithinTime = false;
-    private lastCallFunc: (() => any) | null = null;
+    private lastCallFunc: (() => Promise<any>) | null = null;
+    private timeout: int | null = null;
 
     public constructor(private minimumTimeBetweenCall: number) {}
 
-    public call(func: () => any) {
+    public async call(func: () => any) {
         this.lastCallFunc = func;
-        if (this.hasBeenCalledWithinTime) return;
+
-        this.hasBeenCalledWithinTime = true;
+        if (this.timeout) clearTimeout(this.timeout);
-        func();
+        this.timeout = setTimeout(() => {
-        setTimeout(() => {
-            this.hasBeenCalledWithinTime = false;
             if (this.lastCallFunc) this.lastCallFunc();
         }, this.minimumTimeBetweenCall);
+
+        if (this.hasBeenCalledWithinTime) return;
+
+        this.hasBeenCalledWithinTime = true;
+        await func();
+
+        setTimeout(() => this.hasBeenCalledWithinTime = false, this.minimumTimeBetweenCall);
     }
 }

frontend/src/main.ts

@@ -38,6 +38,28 @@ async function fetchZipCode({
         .catch(() => null as never);
 }
 
+let currentBoundary;
+async function fetchAndDisplayZipCode(coords: Coordinate) {
+    if (currentBoundary &&
+        coords.longitude > currentBoundary[0] &&
+        coords.latitude  > currentBoundary[1] &&
+        coords.longitude < currentBoundary[2] &&
+        coords.latitude  < currentBoundary[3]
+    ) return;
+
+    const response = await fetchZipCode(coords);
+
+    currentBoundary = response.bbox;
+
+    displayZipCode(
+        document.getElementById("zip-code")!,
+        response.nr,
+        response.navn,
+        response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null,
+        response.bbox ? { x1: response.bbox[0], y1: response.bbox[1], x2: response.bbox[2], y2: response.bbox[3] } : null,
+    );
+}
+
 function displayMousePosition(element: HTMLParagraphElement, mouse: Position) {
     element.innerHTML = `Mouse position: <code>(${mouse.x}px, ${mouse.y}px)</code>`;
 }
@@ -63,9 +85,11 @@ function displayZipCode(
     tooltip.setText(zipCode ? `<code>${zipCode}</code> ${name}` : "");
 
     const dot = document.getElementById("dot")!;
+    const boundaryElem = document.getElementById("boundary")!;
 
-    if (!center) {
+    if (!center || !boundary) {
         dot.style.display = "none";
+        boundaryElem.style.display = "none";
         return;
     }
 
@@ -83,12 +107,10 @@ function displayZipCode(
     dot.style.top = position.y + rect.top + document.documentElement.scrollTop + "px";
 
     // Draw boundary
-    if (!boundary) return;
-
     const bottomleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize);
     const topright   = convertCoordinateToPixels({ longitude: boundary.x2, latitude: boundary.y2 }, mapSize);
 
-    const boundaryElem = document.getElementById("boundary")!;
+    boundaryElem.style.display = "block";
     boundaryElem.style.left   = bottomleft.x  + rect.left    + "px";
     boundaryElem.style.top    = topright.y    + rect.top     + document.documentElement.scrollTop + "px";
     boundaryElem.style.width  = topright.x    - bottomleft.x + "px";
@@ -106,52 +128,35 @@ function setupMap(
     mapImg.onmousemove = async (event: MouseEvent) => {
         const mousePosition: Position = { x: event.offsetX, y: event.offsetY };
         displayMousePosition(mousePositionElement, mousePosition);
+
         const mapSize: Size = {
             width: mapImg.clientWidth,
             height: mapImg.clientHeight,
         };
+
         const coords = convertPixelsToCoordinate(mousePosition, mapSize);
         displayCoords(coordsElement, coords);
-        fetcher.call(async () => {
+
-            const response = await fetchZipCode(coords);
+        fetcher.call(async () => await fetchAndDisplayZipCode(coords));
-            displayZipCode(
-                zipCodeElement,
-                response.nr,
-                response.navn,
-                response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null,
-                response.bbox ? { x1: response.bbox[0], y1: response.bbox[1], x2: response.bbox[2], y2: response.bbox[3] } : null,
-            );
-        });
     };
 
     mapImg.onmouseup = async (event: MouseEvent) => {
         const mousePosition: Position = { x: event.offsetX, y: event.offsetY };
         displayMousePosition(mousePositionElement, mousePosition);
+
         const mapSize: Size = {
             width: mapImg.clientWidth,
             height: mapImg.clientHeight,
         };
+
         const coords = convertPixelsToCoordinate(mousePosition, mapSize);
         displayCoords(coordsElement, coords);
-        fetcher.call(async () => {
-            const response = await fetchZipCode(coords);
-            displayZipCode(
-                zipCodeElement,
-                response.nr,
-                response.navn,
-                response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null,
-                response.bbox ? { x1: response.bbox[0], y1: response.bbox[1], x2: response.bbox[2], y2: response.bbox[3] } : null,
-            );
-        });
 
+        fetcher.call(async () => await fetchAndDisplayZipCode(coords));
     }
 
     mapImg.onmouseleave = (_event: MouseEvent) => {
-        document.getElementById("dot")!.style.display = "none";
+        displayZipCode(zipCodeElement, null, null, null, null);
-        [mousePositionElement, coordsElement].forEach(
-            (e) => (e.innerHTML = ""),
-        );
-        zipCodeElement.innerHTML = "Postnummer ikke fundet";
     };
 }
 

frontend/style.css

@@ -194,6 +194,7 @@ code {
     position: absolute;
     display: none;
     z-index: 2;
+    pointer-events: none;
 }
 
 #tooltip {