From 6edf6a7cb5739dc3325bd210d61fda5234fbea20 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sat, 26 Nov 2022 02:38:30 +0530 Subject: [PATCH 01/14] perf: debounce search results --- docs/src/assets/js/search.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index 25282bc2d7f..12c5d5eba86 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -114,6 +114,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 shoud wait before the callback is executed. + * @returns {Function} + */ +function debounce(callback, delay) { + let timer; + return (...args) => { + if (timer) clearTimeout(timer) + timer = setTimeout(() => callback(...args), delay) + } +} + +const debouncedFetchSearchResults = debounce((query, onsuccess, onerror) => { + fetchSearchResults(query) + .then(onsuccess) + .catch(onerror); +}, 300); //----------------------------------------------------------------------------- // Event Handlers @@ -130,9 +149,8 @@ if(searchInput) else searchClearBtn.setAttribute('hidden', ''); if (query.length > 2) { - fetchSearchResults(query) - .then(displaySearchResults) - .catch(clearSearchResults); + + debouncedFetchSearchResults(query, displaySearchResults, clearSearchResults); document.addEventListener('click', function(e) { if(e.target !== resultsElement) clearSearchResults(); From 74f2778b4850fbe5897ede27a3506f823c0e005d Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sat, 26 Nov 2022 02:55:09 +0530 Subject: [PATCH 02/14] fix nits Co-authored-by: Amaresh S M --- docs/src/assets/js/search.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index 12c5d5eba86..9fd28866e25 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -128,10 +128,10 @@ function debounce(callback, delay) { } } -const debouncedFetchSearchResults = debounce((query, onsuccess, onerror) => { +const debouncedFetchSearchResults = debounce((query, onSuccess, onError) => { fetchSearchResults(query) - .then(onsuccess) - .catch(onerror); + .then(onSuccess) + .catch(onError); }, 300); //----------------------------------------------------------------------------- From 5cd3496da7c491e84e53deee6f713ad25bc051a3 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sat, 26 Nov 2022 02:58:18 +0530 Subject: [PATCH 03/14] fix typo Co-authored-by: Amaresh S M --- docs/src/assets/js/search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index 9fd28866e25..fabfc5207ec 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -117,7 +117,7 @@ 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 shoud wait before the callback is executed. + * @param {Number} delay Time in ms that the timer should wait before the callback is executed. * @returns {Function} */ function debounce(callback, delay) { From 9355966ff2b74b1e111e052d042b825826c174ba Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sat, 26 Nov 2022 03:21:21 +0530 Subject: [PATCH 04/14] add apply --- docs/src/assets/js/search.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index fabfc5207ec..bfa914eae3e 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -123,8 +123,8 @@ function maintainScrollVisibility(activeElement, scrollParent) { function debounce(callback, delay) { let timer; return (...args) => { - if (timer) clearTimeout(timer) - timer = setTimeout(() => callback(...args), delay) + if (timer) clearTimeout(timer); + timer = setTimeout(() => callback.apply(this, args), delay); } } From 1dfd2a7a4b777cc703582d6ec2b2af210fd8dde9 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sun, 27 Nov 2022 00:21:37 +0530 Subject: [PATCH 05/14] chore: update the debounce fn parameter --- docs/src/assets/js/search.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index bfa914eae3e..b80af22da85 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -128,10 +128,10 @@ function debounce(callback, delay) { } } -const debouncedFetchSearchResults = debounce((query, onSuccess, onError) => { +const debouncedFetchSearchResults = debounce((query) => { fetchSearchResults(query) - .then(onSuccess) - .catch(onError); + .then(displaySearchResults) + .catch(clearSearchResults); }, 300); //----------------------------------------------------------------------------- @@ -150,7 +150,7 @@ if(searchInput) if (query.length > 2) { - debouncedFetchSearchResults(query, displaySearchResults, clearSearchResults); + debouncedFetchSearchResults(query); document.addEventListener('click', function(e) { if(e.target !== resultsElement) clearSearchResults(); From 57f7e33acfa5e47f75d12565f2e5ba2d218ca406 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sun, 27 Nov 2022 00:30:36 +0530 Subject: [PATCH 06/14] chore: update js doc commments --- docs/src/assets/js/search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index b80af22da85..1910f9f1a16 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -118,7 +118,7 @@ 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 {Function} Returns the new debounced function */ function debounce(callback, delay) { let timer; From d6e562355ed13e7c3c98398d275cdfb031470999 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sun, 27 Nov 2022 00:37:59 +0530 Subject: [PATCH 07/14] chore: add punctuation --- docs/src/assets/js/search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index 1910f9f1a16..6176818ca57 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -118,7 +118,7 @@ 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 + * @returns {Function} Returns the new debounced function. */ function debounce(callback, delay) { let timer; From c854e58a0cf5254a564123f60513febc7b2c00cc Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sat, 26 Nov 2022 02:38:30 +0530 Subject: [PATCH 08/14] perf: debounce search results --- docs/src/assets/js/search.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index 1de0f475eee..659c01e9867 100644 --- 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 shoud wait before the callback is executed. + * @returns {Function} + */ +function debounce(callback, delay) { + let timer; + return (...args) => { + if (timer) clearTimeout(timer) + timer = setTimeout(() => callback(...args), delay) + } +} + +const debouncedFetchSearchResults = debounce((query, onsuccess, onerror) => { + fetchSearchResults(query) + .then(onsuccess) + .catch(onerror); +}, 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, displaySearchResults, clearSearchResults); document.addEventListener('click', function(e) { if(e.target !== resultsElement) clearSearchResults(); From 39ffb41d0040cf4314f1cad4bd3a7f636efb77a7 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sat, 26 Nov 2022 02:55:09 +0530 Subject: [PATCH 09/14] fix nits Co-authored-by: Amaresh S M --- docs/src/assets/js/search.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index 659c01e9867..b6207a96513 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -125,10 +125,10 @@ function debounce(callback, delay) { } } -const debouncedFetchSearchResults = debounce((query, onsuccess, onerror) => { +const debouncedFetchSearchResults = debounce((query, onSuccess, onError) => { fetchSearchResults(query) - .then(onsuccess) - .catch(onerror); + .then(onSuccess) + .catch(onError); }, 300); //----------------------------------------------------------------------------- From 5fb650ba7b4003e96835c281f0c73b40a676560d Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sat, 26 Nov 2022 02:58:18 +0530 Subject: [PATCH 10/14] fix typo Co-authored-by: Amaresh S M --- docs/src/assets/js/search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index b6207a96513..f6ec69bf6d8 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -114,7 +114,7 @@ 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 shoud wait before the callback is executed. + * @param {Number} delay Time in ms that the timer should wait before the callback is executed. * @returns {Function} */ function debounce(callback, delay) { From f17f390b8649c8d6102c351513ad1ec55cd85649 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sat, 26 Nov 2022 03:21:21 +0530 Subject: [PATCH 11/14] add apply --- docs/src/assets/js/search.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index f6ec69bf6d8..d359803b1b6 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -120,8 +120,8 @@ function maintainScrollVisibility(activeElement, scrollParent) { function debounce(callback, delay) { let timer; return (...args) => { - if (timer) clearTimeout(timer) - timer = setTimeout(() => callback(...args), delay) + if (timer) clearTimeout(timer); + timer = setTimeout(() => callback.apply(this, args), delay); } } From 667693f0a6efae33eb5546e997e511ece354c202 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sun, 27 Nov 2022 00:21:37 +0530 Subject: [PATCH 12/14] chore: update the debounce fn parameter --- docs/src/assets/js/search.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index d359803b1b6..b0d48b82bd9 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -125,10 +125,10 @@ function debounce(callback, delay) { } } -const debouncedFetchSearchResults = debounce((query, onSuccess, onError) => { +const debouncedFetchSearchResults = debounce((query) => { fetchSearchResults(query) - .then(onSuccess) - .catch(onError); + .then(displaySearchResults) + .catch(clearSearchResults); }, 300); //----------------------------------------------------------------------------- @@ -147,7 +147,7 @@ if(searchInput) if (query.length > 2) { - debouncedFetchSearchResults(query, displaySearchResults, clearSearchResults); + debouncedFetchSearchResults(query); document.addEventListener('click', function(e) { if(e.target !== resultsElement) clearSearchResults(); From c95dc784628050095e0bdf44ac8c2b58eb599dc4 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sun, 27 Nov 2022 00:30:36 +0530 Subject: [PATCH 13/14] chore: update js doc commments --- docs/src/assets/js/search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index b0d48b82bd9..507e3499a58 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -115,7 +115,7 @@ 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 {Function} Returns the new debounced function */ function debounce(callback, delay) { let timer; From f047a6f40dcdcd392c1fee3d0e031669fd2295c9 Mon Sep 17 00:00:00 2001 From: Shanmughapriyan S Date: Sun, 27 Nov 2022 00:37:59 +0530 Subject: [PATCH 14/14] chore: add punctuation --- docs/src/assets/js/search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js index 507e3499a58..780e3dee107 100644 --- a/docs/src/assets/js/search.js +++ b/docs/src/assets/js/search.js @@ -115,7 +115,7 @@ 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 + * @returns {Function} Returns the new debounced function. */ function debounce(callback, delay) { let timer;