docs: perf debounce the search query (#16586)

shanpriyan · amareshsm · web-flow · commit ade621dd12fc · 2022-11-27T12:27:32.000+01:00
* perf: debounce search results

* fix nits

Co-authored-by: Amaresh  S M  &lt;amareshsm13@gmail.com&gt;

* fix typo

Co-authored-by: Amaresh  S M  &lt;amareshsm13@gmail.com&gt;

* add apply

* chore: update the debounce fn parameter

* chore: update js doc commments

* chore: add punctuation

* perf: debounce search results

* fix nits

Co-authored-by: Amaresh  S M  &lt;amareshsm13@gmail.com&gt;

* fix typo

Co-authored-by: Amaresh  S M  &lt;amareshsm13@gmail.com&gt;

* add apply

* chore: update the debounce fn parameter

* chore: update js doc commments

* chore: add punctuation

Co-authored-by: Amaresh  S M  &lt;amareshsm13@gmail.com&gt;
diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js
@@ -111,6 +111,25 @@ function maintainScrollVisibility(activeElement, scrollParent) {
 
 }
 
+/**
+ * Debounces the provided callback with a given delay.
+ * @param {Function} callback The callback that needs to be debounced.
+ * @param {Number} delay Time in ms that the timer should wait before the callback is executed.
+ * @returns {Function} Returns the new debounced function.
+ */
+function debounce(callback, delay) {
+    let timer;
+    return (...args) => {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => callback.apply(this, args), delay);
+    }
+}
+
+const debouncedFetchSearchResults = debounce((query) => {
+    fetchSearchResults(query)
+        .then(displaySearchResults)
+        .catch(clearSearchResults);
+}, 300);
 
 //-----------------------------------------------------------------------------
 // Event Handlers
@@ -127,9 +146,8 @@ if(searchInput)
         else searchClearBtn.setAttribute('hidden', '');
 
         if (query.length > 2) {
-            fetchSearchResults(query)
-                .then(displaySearchResults)
-                .catch(clearSearchResults);
+
+            debouncedFetchSearchResults(query);
 
             document.addEventListener('click', function(e) {
                 if(e.target !== resultsElement) clearSearchResults();
