"Debounce" la funció fetchClasses()
Cada cop que es fa clic a un botó per canviar el dia/hora s'envia una
petició al backend, fet que el podria saturar.
Aquest commit ho canvia perquè la petició només s'enviï si es porten
400 ms sense haver fet clic als botons. Així, mentre es fa clic molt
ràpid als botons no s'actualitza el llistat.
(cherry picked from commit 31d0ae03f5dd9ca88c2af71377ab93e886c922ce)
diff --git a/js/build_page.js b/js/build_page.js
index aedfbdb..34e8590 100644
--- a/js/build_page.js
+++ b/js/build_page.js
@@ -37,6 +37,21 @@
var current_time;
+// From https://gist.github.com/treyhuffine/2ced8b8c503e5246e2fd258ddbd21b8c
+const debounce = (func, wait) => {
+ let timeout;
+
+ return function executedFunction(...args) {
+ const later = () => {
+ clearTimeout(timeout);
+ func(...args);
+ };
+
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ };
+};
+
function fillInSummary() {
var begins = new Date(parseInt(final_JSON.class.begins)*1000);
var ends = new Date(parseInt(final_JSON.class.ends)*1000);
@@ -213,7 +228,7 @@
document.getElementById("date-prev").addEventListener('click', function (el) {
current_time = new Date(current_time.getTime() - 24*60*60000);
buildTimeSelector(current_time);
- fetchClasses();
+ fetchClassesDebounced();
});
document.getElementById("date-next").addEventListener('click', function (el) {
var potential_time = new Date(current_time.getTime() + 24*60*60000);
@@ -222,7 +237,7 @@
current_time = potential_time;
buildTimeSelector(current_time);
- fetchClasses();
+ fetchClassesDebounced();
});
document.getElementById("time-prev").addEventListener('click', function (el) {
current_time = new Date(current_time.getTime() - 30*60000);
@@ -232,7 +247,7 @@
current_time.setMinutes(30);
}
buildTimeSelector(current_time);
- fetchClasses();
+ fetchClassesDebounced();
});
document.getElementById("time-next").addEventListener('click', function (el) {
var potential_time = new Date(current_time.getTime() + 30*60000);
@@ -246,7 +261,7 @@
current_time = potential_time;
buildTimeSelector(current_time);
- fetchClasses();
+ fetchClassesDebounced();
});
}
@@ -286,6 +301,8 @@
});
}
+const fetchClassesDebounced = debounce(fetchClasses, 400);
+
function onPageLoad() {
var searchParams = new URLSearchParams(location.search);
if (searchParams.has('apiUrl')) {