Merge pull request #21117 from Chocobo1/webui_interval

WebUI: timer related clean ups
2025-08-14 02:27:09 -07:00 · 2024-07-29 15:06:48 +08:00 · 2024-07-29 15:06:48 +08:00 · 9d494e84bf
commit 9d494e84bf
parent 69a829dfb0 bf7e1516d5
11 changed files with 52 additions and 49 deletions
--- a/src/webui/www/private/scripts/client.js
+++ b/src/webui/www/private/scripts/client.js
@ -705,7 +705,7 @@ window.addEventListener("DOMContentLoaded", () => {
        };
    })();

-    let syncMainDataTimeoutID;
+    let syncMainDataTimeoutID = -1;
    let syncRequestInProgress = false;
    const syncMainData = function() {
        const url = new URI("api/v2/sync/maindata");
@ -889,6 +889,7 @@ window.addEventListener("DOMContentLoaded", () => {
            return;

        clearTimeout(syncMainDataTimeoutID);
+        syncMainDataTimeoutID = -1;

        if (window.qBittorrent.Client.isStopped())
            return;
--- a/src/webui/www/private/scripts/dynamicTable.js
+++ b/src/webui/www/private/scripts/dynamicTable.js
@ -91,54 +91,43 @@ window.qBittorrent.DynamicTable ??= (() => {
        },

        setupCommonEvents: function() {
-            const scrollFn = function() {
-                $(this.dynamicTableFixedHeaderDivId).getElements("table")[0].style.left = -$(this.dynamicTableDivId).scrollLeft + "px";
-            }.bind(this);
+            const tableDiv = $(this.dynamicTableDivId);
+            const tableFixedHeaderDiv = $(this.dynamicTableFixedHeaderDivId);

-            $(this.dynamicTableDivId).addEvent("scroll", scrollFn);
+            tableDiv.addEventListener("scroll", () => {
+                tableFixedHeaderDiv.getElements("table")[0].style.left = `${-tableDiv.scrollLeft}px`;
+            });

            // if the table exists within a panel
-            if ($(this.dynamicTableDivId).getParent(".panel")) {
-                const resizeFn = function() {
-                    const panel = $(this.dynamicTableDivId).getParent(".panel");
-                    let h = panel.getBoundingClientRect().height - $(this.dynamicTableFixedHeaderDivId).getBoundingClientRect().height;
-                    $(this.dynamicTableDivId).style.height = h + "px";
+            const parentPanel = tableDiv.getParent(".panel");
+            if (parentPanel) {
+                const resizeFn = (entries) => {
+                    const panel = entries[0].target;
+                    let h = panel.getBoundingClientRect().height - tableFixedHeaderDiv.getBoundingClientRect().height;
+                    tableDiv.style.height = `${h}px`;

                    // Workaround due to inaccurate calculation of elements heights by browser
-
                    let n = 2;

                    // is panel vertical scrollbar visible or does panel content not fit?
                    while (((panel.clientWidth !== panel.offsetWidth) || (panel.clientHeight !== panel.scrollHeight)) && (n > 0)) {
                        --n;
                        h -= 0.5;
-                        $(this.dynamicTableDivId).style.height = h + "px";
+                        tableDiv.style.height = `${h}px`;
                    }
+                };

-                    this.lastPanelHeight = panel.getBoundingClientRect().height;
-                }.bind(this);
+                this.resizeDebounceTimer = -1;
+                const resizeDebouncer = (entries) => {
+                    clearTimeout(this.resizeDebounceTimer);
+                    this.resizeDebounceTimer = setTimeout(() => {
+                        resizeFn(entries);
+                        resizeDebounceTimer = -1;
+                    }, 100);
+                };

-                $(this.dynamicTableDivId).getParent(".panel").addEvent("resize", resizeFn);
-
-                this.lastPanelHeight = 0;
-
-                // Workaround. Resize event is called not always (for example it isn't called when browser window changes it's size)
-
-                const checkResizeFn = function() {
-                    const tableDiv = $(this.dynamicTableDivId);
-
-                    // dynamicTableDivId is not visible on the UI
-                    if (!tableDiv)
-                        return;
-
-                    const panel = tableDiv.getParent(".panel");
-                    if (this.lastPanelHeight !== panel.getBoundingClientRect().height) {
-                        this.lastPanelHeight = panel.getBoundingClientRect().height;
-                        panel.fireEvent("resize");
-                    }
-                }.bind(this);
-
-                setInterval(checkResizeFn, 500);
+                const resizeObserver = new ResizeObserver(resizeDebouncer);
+                resizeObserver.observe(parentPanel, { box: "border-box" });
            }
        },

--- a/src/webui/www/private/scripts/piecesbar.js
+++ b/src/webui/www/private/scripts/piecesbar.js
@ -88,7 +88,7 @@ window.qBittorrent.PiecesBar ??= (() => {
            if (vals.width > 0)
                obj.setPieces(vals.pieces);
            else
-                setTimeout(() => { checkForParent(obj.id); }, 1);
+                setTimeout(() => { checkForParent(obj.id); });

            return obj;
        }
@ -258,7 +258,7 @@ window.qBittorrent.PiecesBar ??= (() => {
        if (!obj)
            return;
        if (!obj.parentNode)
-            return setTimeout(() => { checkForParent(id); }, 1);
+            return setTimeout(() => { checkForParent(id); }, 100);

        obj.refresh();
    }
--- a/src/webui/www/private/scripts/progressbar.js
+++ b/src/webui/www/private/scripts/progressbar.js
@ -104,7 +104,7 @@ window.qBittorrent.ProgressBar ??= (() => {
            if (vals.width)
                obj.setValue(vals.value);
            else
-                setTimeout('ProgressBar_checkForParent("' + obj.id + '")', 1);
+                setTimeout('ProgressBar_checkForParent("' + obj.id + '")');
            return obj;
        }
    });
@ -144,7 +144,7 @@ window.qBittorrent.ProgressBar ??= (() => {
        if (!obj)
            return;
        if (!obj.parentNode)
-            return setTimeout('ProgressBar_checkForParent("' + id + '")', 1);
+            return setTimeout('ProgressBar_checkForParent("' + id + '")', 100);
        obj.setStyle("width", "100%");
        const w = obj.offsetWidth;
        obj.vals.dark.setStyle("width", w);
--- a/src/webui/www/private/scripts/prop-files.js
+++ b/src/webui/www/private/scripts/prop-files.js
@ -306,6 +306,8 @@ window.qBittorrent.PropFiles ??= (() => {
            return;

        clearTimeout(loadTorrentFilesDataTimer);
+        loadTorrentFilesDataTimer = -1;
+
        new Request({
            url: "api/v2/torrents/filePrio",
            method: "post",
@ -331,7 +333,7 @@ window.qBittorrent.PropFiles ??= (() => {
        torrentFilesTable.updateTable(false);
    };

-    let loadTorrentFilesDataTimer;
+    let loadTorrentFilesDataTimer = -1;
    const loadTorrentFilesData = function() {
        if ($("prop_files").hasClass("invisible")
            || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) {
@ -378,6 +380,7 @@ window.qBittorrent.PropFiles ??= (() => {

    const updateData = function() {
        clearTimeout(loadTorrentFilesDataTimer);
+        loadTorrentFilesDataTimer = -1;
        loadTorrentFilesData();
    };

--- a/src/webui/www/private/scripts/prop-general.js
+++ b/src/webui/www/private/scripts/prop-general.js
@ -72,7 +72,7 @@ window.qBittorrent.PropGeneral ??= (() => {
        piecesBar.clear();
    };

-    let loadTorrentDataTimer;
+    let loadTorrentDataTimer = -1;
    const loadTorrentData = function() {
        if ($("prop_general").hasClass("invisible")
            || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) {
@ -250,6 +250,7 @@ window.qBittorrent.PropGeneral ??= (() => {

    const updateData = function() {
        clearTimeout(loadTorrentDataTimer);
+        loadTorrentDataTimer = -1;
        loadTorrentData();
    };

--- a/src/webui/www/private/scripts/prop-peers.js
+++ b/src/webui/www/private/scripts/prop-peers.js
@ -37,7 +37,7 @@ window.qBittorrent.PropPeers ??= (() => {
    };

    const torrentPeersTable = new window.qBittorrent.DynamicTable.TorrentPeersTable();
-    let loadTorrentPeersTimer;
+    let loadTorrentPeersTimer = -1;
    let syncTorrentPeersLastResponseId = 0;
    let show_flags = true;

@ -109,6 +109,7 @@ window.qBittorrent.PropPeers ??= (() => {

    const updateData = function() {
        clearTimeout(loadTorrentPeersTimer);
+        loadTorrentPeersTimer = -1;
        loadTorrentPeersData();
    };

--- a/src/webui/www/private/scripts/prop-trackers.js
+++ b/src/webui/www/private/scripts/prop-trackers.js
@ -39,7 +39,7 @@ window.qBittorrent.PropTrackers ??= (() => {
    let current_hash = "";

    const torrentTrackersTable = new window.qBittorrent.DynamicTable.TorrentTrackersTable();
-    let loadTrackersDataTimer;
+    let loadTrackersDataTimer = -1;

    const loadTrackersData = function() {
        if ($("prop_trackers").hasClass("invisible")
@ -119,6 +119,7 @@ window.qBittorrent.PropTrackers ??= (() => {

    const updateData = function() {
        clearTimeout(loadTrackersDataTimer);
+        loadTrackersDataTimer = -1;
        loadTrackersData();
    };

--- a/src/webui/www/private/scripts/prop-webseeds.js
+++ b/src/webui/www/private/scripts/prop-webseeds.js
@ -88,7 +88,7 @@ window.qBittorrent.PropWebseeds ??= (() => {

    let current_hash = "";

-    let loadWebSeedsDataTimer;
+    let loadWebSeedsDataTimer = -1;
    const loadWebSeedsData = function() {
        if ($("prop_webseeds").hasClass("invisible")
            || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) {
@ -138,6 +138,7 @@ window.qBittorrent.PropWebseeds ??= (() => {

    const updateData = function() {
        clearTimeout(loadWebSeedsDataTimer);
+        loadWebSeedsDataTimer = -1;
        loadWebSeedsData();
    };

--- a/src/webui/www/private/scripts/search.js
+++ b/src/webui/www/private/scripts/search.js
@ -47,7 +47,7 @@ window.qBittorrent.Search ??= (() => {
    };

    const searchTabIdPrefix = "Search-";
-    let loadSearchPluginsTimer;
+    let loadSearchPluginsTimer = -1;
    const searchPlugins = [];
    let prevSearchPluginsResponse;
    let selectedCategory = "QBT_TR(All categories)QBT_TR[CONTEXT=SearchEngineWidget]";
@ -207,7 +207,7 @@ window.qBittorrent.Search ??= (() => {
            rowId: 0,
            selectedRowIds: [],
            running: true,
-            loadResultsTimer: null,
+            loadResultsTimer: -1,
            sort: { column: searchResultsTable.sortedColumn, reverse: searchResultsTable.reverseSort },
        });
        updateSearchResultsData(searchId);
@ -507,6 +507,7 @@ window.qBittorrent.Search ??= (() => {
                },
                onClose: function() {
                    clearTimeout(loadSearchPluginsTimer);
+                    loadSearchPluginsTimer = -1;
                }
            });
        }
@ -569,6 +570,7 @@ window.qBittorrent.Search ??= (() => {
        if (state) {
            state.running = false;
            clearTimeout(state.loadResultsTimer);
+            state.loadResultsTimer = -1;
        }
    };

--- a/src/webui/www/private/views/rss.html
+++ b/src/webui/www/private/views/rss.html
@ -180,7 +180,7 @@
        const serverSyncRssDataInterval = 1500;
        let feedData = {};
        let pathByFeedId = new Map();
-        let feedRefreshTimer;
+        let feedRefreshTimer = -1;
        const rssFeedTable = new window.qBittorrent.DynamicTable.RssFeedTable();
        const rssArticleTable = new window.qBittorrent.DynamicTable.RssArticleTable();

@ -293,11 +293,15 @@
        };

        const unload = () => {
-            clearInterval(feedRefreshTimer);
+            clearTimeout(feedRefreshTimer);
+            feedRefreshTimer = -1;
        };

        const load = () => {
-            feedRefreshTimer = setInterval(updateRssFeedList, serverSyncRssDataInterval);
+            feedRefreshTimer = setTimeout(() => {
+                updateRssFeedList();
+                load();
+            }, serverSyncRssDataInterval);
        };

        const addRSSFeed = () => {