Resolve debounce race condition

debounce didn't cancel the execution but only deplayed the resolution.
It then resolved multiple times with the same values casing the resulting
code to be called multiple times in direct succession on multiple threads.

This can not only resolve into multipe DOM updates but also to race conditions.

Author: codingjoe

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -294,17 +294,15 @@ const djdt = {
     updateOnAjax() {
         const sidebarUrl =
             document.getElementById("djDebug").dataset.sidebarUrl;
-        const slowjax = debounce(ajax, 200);
 
-        function handleAjaxResponse(requestId) {
+        const handleAjaxResponse = debounce(async (requestId) => {
             const encodedRequestId = encodeURIComponent(requestId);
             const dest = `${sidebarUrl}?request_id=${encodedRequestId}`;
-            slowjax(dest).then((data) => {
-                if (djdt.needUpdateOnFetch) {
-                    replaceToolbarState(encodedRequestId, data);
-                }
-            });
-        }
+            const data = await ajax(dest);
+            if (djdt.needUpdateOnFetch) {
+                replaceToolbarState(encodedRequestId, data);
+            }
+        }, 100);
 
         // Patch XHR / traditional AJAX requests
         const origOpen = XMLHttpRequest.prototype.open;

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -123,21 +123,24 @@ function replaceToolbarState(newRequestId, data) {
     }
 }
 
-function debounce(func, delay) {
-    let timer = null;
-    let resolves = [];
-
-    return (...args) => {
+/**
+ * Debounce async functions.
+ *
+ * @param {Function} func - Function to be executed.
+ * @param {number} timeout - Time to wait before executing function in milliseconds.
+ * @returns {Function} - Debounced function.
+ */
+export function debounce(func, timeout) {
+    let timer;
+    return async (...args) => {
         clearTimeout(timer);
-        timer = setTimeout(() => {
-            const result = func(...args);
-            for (const r of resolves) {
-                r(result);
-            }
-            resolves = [];
-        }, delay);
-
-        return new Promise((r) => resolves.push(r));
+        return await new Promise((resolve, reject) => {
+            timer = setTimeout(() => {
+                Promise.resolve(func.apply(this, [...args]))
+                    .then(resolve)
+                    .catch(reject);
+            }, timeout);
+        });
     };
 }
 

tests/js/utils.test.js

@@ -299,7 +299,6 @@ describe("utils.js", () => {
 
             expect(fn).toHaveBeenCalledTimes(1);
             expect(fn).toHaveBeenCalledWith("third");
-            expect(results).toEqual(["third", "third", "third"]);
             vi.useRealTimers();
         });
     });