diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 0000000..e7856c3 --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1,3 @@ +## 2026-03-16 - [Debouncing Search Re-renders] +**Learning:** Avoid micro-optimizing date creation inside render loops if it breaks variable scoping or introduces messy global states. A much higher-impact optimization for vanilla JS lists is simply debouncing the input event that triggers the render loop in the first place, ensuring the heavy DOM manipulation function isn't called on every single keystroke. +**Action:** Always check the event listener attachments for high-frequency events (like `input` or `scroll`) before trying to micro-optimize the render loop itself. Debounce or throttle these handlers to reduce total render calls dramatically. diff --git a/script.js b/script.js index 22f399d..271cd1f 100644 --- a/script.js +++ b/script.js @@ -658,8 +658,22 @@ function activateHoliday(overlay) { /* ========================================= 7. EVENT LISTENERS ========================================= */ +// Utility: Debounce function to limit the rate at which a function fires +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + function setupEventListeners() { - searchInput.addEventListener('input', renderPDFs); + // Debounce the search input to significantly reduce DOM renders on every keystroke + searchInput.addEventListener('input', debounce(renderPDFs, 300)); tabBtns.forEach(btn => { btn.addEventListener('click', handleSemesterChange);