Add debounce to search

Should reduce number of search calls
pehala · Jan 28, 2024 · 22f85a3 · 22f85a3
1 parent 382993d
commit 22f85a3
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/backend/templates/songs/index.html b/backend/templates/songs/index.html
@@ -120,6 +120,17 @@ <h6 class="d-inline" ><%:author%></h6>
     import {Options, BooleanOption} from "{% static 'js/Options.js' %}"
     const canWakeLock = () => 'wakeLock' in navigator;
 
+    function debounce(callback, delay = 1000) {
+      var time;
+
+      return (...args) => {
+        clearTimeout(time);
+        time = setTimeout(() => {
+          callback(...args);
+        }, delay);
+      };
+    }
+
     let table = null
     function createDatatable(paging) {
         return $('#datatable').DataTable({
@@ -226,6 +237,14 @@ <h6 class="d-inline" ><%:author%></h6>
             $(".chord").show()
         }
     }
+    const search = debounce(
+        function ( val ) {
+            table.search(val);
+            table.draw(false);
+            console.log("searched")
+        }, 200
+    );
+
     const config = new Map([
             ["hide_chords", new BooleanOption(document.getElementById("hideChords"), hideChords, false)],
             ["prevent_sleep", new BooleanOption(document.getElementById("preventSleep"), function(value) {
@@ -280,9 +299,8 @@ <h6 class="d-inline" ><%:author%></h6>
 
     });
 
-    document.getElementById("searchInput").addEventListener("input", function (event) {
-        table.search(event.target.value);
-        table.draw();
+    document.getElementById("searchInput").addEventListener("input", function(event) {
+        search(event.target.value)
     })
     </script>
 {% endblock %}