- commit
- f9d369a
- parent
- f6ca31f
- author
- Kris
- date
- 2023-08-09 13:50:40 +0000 UTC
[UX] Debounce search input (#447)
1 files changed,
+17,
-2
+17,
-2
1@@ -94,6 +94,18 @@ function mustAll(pattern) {
2 return el;
3 }
4
5+function debounce(fn, delay) {
6+ let timeoutID;
7+ return function(...args) {
8+ if (timeoutID) {
9+ clearTimeout(timeoutID);
10+ }
11+ timeoutID = setTimeout(() => {
12+ fn(...args);
13+ }, delay);
14+ };
15+}
16+
17 function init() {
18 const searchEl = must("#search");
19 const clearSearchEl = must("#search_clear");
20@@ -116,10 +128,13 @@ function init() {
21 filter(value);
22 };
23
24- searchEl.addEventListener("input", (ev) => {
25+ const debouncedSearch = debounce((ev) => {
26 const value = ev.target.value;
27 search(value);
28- });
29+ }, 150);
30+
31+ searchEl.addEventListener("input", debouncedSearch);
32+
33
34 clearSearchEl.addEventListener("click", () => {
35 searchEl.value = "";