Only refresh data when page/tab is currently visible

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/js/footer.js

@@ -104,17 +104,23 @@ function countDown() {
 }
 
 function checkBlocking() {
+  // Skip if page is hidden
+  if (document.hidden) {
+    utils.setTimer(checkBlocking, REFRESH_INTERVAL.blocking);
+    return;
+  }
+
   $.ajax({
     url: "/api/dns/blocking",
     method: "GET",
   })
     .done(function (data) {
       piholeChanged(data.blocking);
-      setTimeout(checkBlocking, REFRESH_INTERVAL.blocking);
+      utils.setTimer(checkBlocking, REFRESH_INTERVAL.blocking);
     })
     .fail(function (data) {
       apiFailure(data);
-      setTimeout(checkBlocking, 3 * REFRESH_INTERVAL.blocking);
+      utils.setTimer(checkBlocking, 3 * REFRESH_INTERVAL.blocking);
     });
 }
 
@@ -260,7 +266,7 @@ function updateFtlInfo() {
       );
 
       clearTimeout(ftlinfoTimer);
-      ftlinfoTimer = setTimeout(updateFtlInfo, REFRESH_INTERVAL.ftl);
+      ftlinfoTimer = utils.setTimer(updateFtlInfo, REFRESH_INTERVAL.ftl);
     })
     .fail(function (data) {
       apiFailure(data);
@@ -359,7 +365,7 @@ function updateSystemInfo() {
       $("#sysinfo-system-overlay").hide();
 
       clearTimeout(systemTimer);
-      systemTimer = setTimeout(updateSystemInfo, REFRESH_INTERVAL.system);
+      systemTimer = utils.setTimer(updateSystemInfo, REFRESH_INTERVAL.system);
     })
     .fail(function (data) {
       apiFailure(data);
@@ -412,7 +418,7 @@ function updateSensorsInfo() {
 
       // Update every 20 seconds
       clearTimeout(sensorsTimer);
-      sensorsTimer = setTimeout(updateSensorsInfo, REFRESH_INTERVAL.sensors);
+      sensorsTimer = utils.setTimer(updateSensorsInfo, REFRESH_INTERVAL.sensors);
     })
     .fail(function (data) {
       apiFailure(data);
@@ -582,7 +588,7 @@ function updateVersionInfo() {
       );
 
     clearTimeout(versionTimer);
-    versionTimer = setTimeout(updateVersionInfo, REFRESH_INTERVAL.version);
+    versionTimer = utils.setTimer(updateVersionInfo, REFRESH_INTERVAL.version);
   });
 }
 
@@ -606,7 +612,7 @@ $(function () {
     // Run check immediately after page loading ...
     utils.checkMessages();
     // ... and then periodically
-    setInterval(utils.checkMessages, REFRESH_INTERVAL.messages);
+    utils.setInter(utils.checkMessages, REFRESH_INTERVAL.messages);
   }
 });
 

scripts/pi-hole/js/index.js

@@ -72,13 +72,13 @@ function updateQueriesOverTime() {
   })
     .done(function () {
       failures = 0;
-      setTimeout(updateQueriesOverTime, REFRESH_INTERVAL.history);
+      utils.setTimer(updateQueriesOverTime, REFRESH_INTERVAL.history);
     })
     .fail(function () {
       failures++;
       if (failures < 5) {
         // Try again ´only if this has not failed more than five times in a row
-        setTimeout(updateQueriesOverTime, 0.1 * REFRESH_INTERVAL.history);
+        utils.setTimer(updateQueriesOverTime, 0.1 * REFRESH_INTERVAL.history);
       }
     })
     .fail(function (data) {
@@ -121,7 +121,7 @@ function updateQueryTypesPie() {
     queryTypePieChart.update("none");
   })
     .done(function () {
-      setTimeout(updateQueryTypesPie, REFRESH_INTERVAL.query_types);
+      utils.setTimer(updateQueryTypesPie, REFRESH_INTERVAL.query_types);
     })
     .fail(function (data) {
       apiFailure(data);
@@ -182,13 +182,13 @@ function updateClientsOverTime() {
     .done(function () {
       // Reload graph after 10 minutes
       failures = 0;
-      setTimeout(updateClientsOverTime, REFRESH_INTERVAL.clients);
+      utils.setTimer(updateClientsOverTime, REFRESH_INTERVAL.clients);
     })
     .fail(function () {
       failures++;
       if (failures < 5) {
         // Try again only if this has not failed more than five times in a row
-        setTimeout(updateClientsOverTime, 0.1 * REFRESH_INTERVAL.clients);
+        utils.setTimer(updateClientsOverTime, 0.1 * REFRESH_INTERVAL.clients);
       }
     })
     .fail(function (data) {
@@ -249,7 +249,7 @@ function updateForwardDestinationsPie() {
     forwardDestinationPieChart.update("none");
   })
     .done(function () {
-      setTimeout(updateForwardDestinationsPie, REFRESH_INTERVAL.upstreams);
+      utils.setTimer(updateForwardDestinationsPie, REFRESH_INTERVAL.upstreams);
     })
     .fail(function (data) {
       apiFailure(data);
@@ -377,7 +377,7 @@ function updateTopLists() {
   updateTopClientsTable(false);
 
   // Update top lists data every 10 seconds
-  setTimeout(updateTopLists, REFRESH_INTERVAL.top_lists);
+  utils.setTimer(updateTopLists, REFRESH_INTERVAL.top_lists);
 }
 
 function glowIfChanged(elem, textData) {
@@ -411,10 +411,10 @@ function updateSummaryData(runOnce = false) {
     }, 500);
   })
     .done(function () {
-      if (!runOnce) setTimeout(updateSummaryData, REFRESH_INTERVAL.summary);
+      if (!runOnce) utils.setTimer(updateSummaryData, REFRESH_INTERVAL.summary);
     })
     .fail(function (data) {
-      setTimeout(updateSummaryData, 3 * REFRESH_INTERVAL.summary);
+      utils.setTimer(updateSummaryData, 3 * REFRESH_INTERVAL.summary);
       apiFailure(data);
     });
 }

scripts/pi-hole/js/settings-system.js

@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global apiFailure:false, Chart:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false, REFRESH_INTERVAL: false */
+/* global apiFailure:false, Chart:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false, REFRESH_INTERVAL: false, utils: false */
 
 var hostinfoTimer = null;
 var cachePieChart = null;
@@ -106,7 +106,7 @@ function updateHostInfo() {
           uname.machine
       );
       clearTimeout(hostinfoTimer);
-      hostinfoTimer = setTimeout(updateHostInfo, REFRESH_INTERVAL.hosts);
+      hostinfoTimer = utils.setTimer(updateHostInfo, REFRESH_INTERVAL.hosts);
     })
     .fail(function (data) {
       apiFailure(data);
@@ -173,7 +173,7 @@ function updateMetrics() {
 
       $("div[id^='sysinfo-metrics-overlay']").hide();
       clearTimeout(metricsTimer);
-      metricsTimer = setTimeout(updateMetrics, REFRESH_INTERVAL.metrics);
+      metricsTimer = utils.setTimer(updateMetrics, REFRESH_INTERVAL.metrics);
     })
     .fail(function (data) {
       apiFailure(data);

scripts/pi-hole/js/taillog.js

@@ -23,7 +23,7 @@ const markUpdates = true;
 function getData() {
   // Only update when spinner is spinning
   if (!$("#feed-icon").hasClass("fa-play")) {
-    window.setTimeout(getData, REFRESH_INTERVAL.logs);
+    utils.setTimer(getData, REFRESH_INTERVAL.logs);
     return;
   }
 
@@ -60,7 +60,7 @@ function getData() {
           $("#output").html("<i>*** Log file is empty ***</i>");
         }
 
-        window.setTimeout(getData, REFRESH_INTERVAL.logs);
+        utils.setTimer(getData, REFRESH_INTERVAL.logs);
         return;
       }
 
@@ -104,11 +104,11 @@ function getData() {
       // Set filename
       $("#filename").text(data.file);
 
-      window.setTimeout(getData, REFRESH_INTERVAL.logs);
+      utils.setTimer(getData, REFRESH_INTERVAL.logs);
     })
     .fail(function (data) {
       apiFailure(data);
-      window.setTimeout(getData, 5 * REFRESH_INTERVAL.logs);
+      utils.setTimer(getData, 5 * REFRESH_INTERVAL.logs);
     });
 }
 

scripts/pi-hole/js/utils.js

@@ -616,6 +616,42 @@ function listAlert(type, items, data) {
   );
 }
 
+// Function that calls a function only if the page is currently visible. This is
+// useful to prevent unnecessary API calls when the page is not visible (e.g.
+// when the user is on another tab).
+function callIfVisible(func) {
+  if (document.hidden) {
+    // Page is not visible, try again in 1 second
+    window.setTimeout(callIfVisible, 1000, func);
+    return;
+  }
+
+  // Page is visible, call function instead
+  func();
+}
+
+// Timer that calls a function after <interval> milliseconds but only if the
+// page is currently visible. We cancel possibly running timers for the same
+// function before starting a new one to prevent multiple timers running at
+// the same time causing unnecessary identical API calls when the page is
+// visible again.
+function setTimer(func, interval) {
+  // Cancel possibly running timer
+  window.clearTimeout(func.timer);
+  // Start new timer
+  func.timer = window.setTimeout(callIfVisible, interval, func);
+}
+
+// Same as setTimer() but calls the function every <interval> milliseconds
+function setInter(func, interval) {
+  // Cancel possibly running timer
+  window.clearTimeout(func.timer);
+  // Start new timer
+  func.timer = window.setTimeout(callIfVisible, interval, func);
+  // Restart timer
+  window.setTimeout(setInter, interval, func, interval);
+}
+
 window.utils = (function () {
   return {
     escapeHtml: escapeHtml,
@@ -649,5 +685,7 @@ window.utils = (function () {
     hexEncode: hexEncode,
     hexDecode: hexDecode,
     listsAlert: listAlert,
+    setTimer: setTimer,
+    setInter: setInter,
   };
 })();