Adding debounce for pulling new panel info

Author: gone

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -1,4 +1,4 @@
-import { $$, ajax, replaceToolbarState } from "./utils.js";
+import { $$, ajax, replaceToolbarState, debounce } from "./utils.js";
 
 function onKeyDown(event) {
     if (event.keyCode === 27) {
@@ -259,27 +259,21 @@ const djdt = {
     update_on_ajax() {
         const sidebar_url =
             document.getElementById("djDebug").dataset.sidebarUrl;
+        const slowjax = debounce(ajax, 400);
 
         const origOpen = XMLHttpRequest.prototype.open;
         XMLHttpRequest.prototype.open = function () {
             this.addEventListener("load", function () {
-                if (
-                    this.responseURL !== "" &&
-                    this.responseURL.indexOf("__debug__") === -1
-                ) {
-                    let signed = this.getResponseHeader(
-                        "dj-toolbar-store-id-signature"
-                    );
-                    const store_id = this.getResponseHeader(
-                        "dj-toolbar-store-id"
-                    );
-                    if (signed !== null) {
-                        signed = encodeURIComponent(signed);
-                        const dest = `${sidebar_url}?signed=${signed}`;
-                        ajax(dest).then(function (data) {
-                            replaceToolbarState(store_id, data);
-                        });
-                    }
+                let signed = this.getResponseHeader(
+                    "dj-toolbar-store-id-signature"
+                );
+                const store_id = this.getResponseHeader("dj-toolbar-store-id");
+                if (signed !== null) {
+                    signed = encodeURIComponent(signed);
+                    const dest = `${sidebar_url}?signed=${signed}`;
+                    slowjax(dest).then(function (data) {
+                        replaceToolbarState(store_id, data);
+                    });
                 }
             });
             origOpen.apply(this, arguments);

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -118,4 +118,20 @@ function replaceToolbarState(newStoreId, data) {
     });
 }
 
-export { $$, ajax, ajaxForm, replaceToolbarState };
+function debounce(func, delay) {
+    let timer = null;
+    let resolves = [];
+
+    return function (...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            const result = func(...args);
+            resolves.forEach((r) => r(result));
+            resolves = [];
+        }, delay);
+
+        return new Promise((r) => resolves.push(r));
+    };
+}
+
+export { $$, ajax, ajaxForm, replaceToolbarState, debounce };