Hier is een voorbeeld van een debounce functie in JavaScript die je kunt gebruiken voor input events, inclusief best practices en optimalisaties: ```javascript function debounce(func, delay) { let timerId; return function(...args) { const context = this; clearTimeout(timerId); // Reset de timer bij elke nieuwe call timerId = setTimeout(() => { func.apply(context, args); // Voer de functie uit na de vertraging }, delay); }; } // Voorbeeldgebruik: // Selecteer het input element const inputElement = document.querySelector('#mijnInput'); // Definieer de functie die je wilt debounce function handleInputEvent(event) { console.log('Input waarde:', event.target.value); } // Maak een gedeactiveerde versie van de functie met debounce const debouncedInputHandler = debounce(handleInputEvent, 300); // Voeg de event listener toe inputElement.addEventListener('input', debouncedInputHandler); ``` **Best practices en optimalisaties:** - Gebruik `clearTimeout` om meerdere snelle input events te minimaliseren. - Bewaar de timerId in een closure zodat elke aangeroepen functie dezelfde timer gebruikt. - Gebruik `apply` of `call` om de juiste context (`this`) en argumenten door te geven. - Pas de debounce tijd (`delay`) aan op basis van gebruikerservaring en performantiebehoefte. - Overweeg het gebruik van `passive: true` bij event listeners voor betere scrollprestaties, indien van toepassing. - Gebruik arrow functions voor compactheid en behoud van lexical scope waar mogelijk. Wil je dat ik het codefragment uitbreid of aanpas voor een specifieke situatie?

Zeker, hier is een gedebounceerde functie voor input events in JavaScript met best practices en optimalisaties: ```javascript /** * Debounce functie voor input events * @param {Function} func - De uit te voeren functie * @param {number} wait - Wachtijd in milliseconden * @param {boolean} immediate - Of de functie onmiddellijk moet uitvoeren * @returns {Function} Gedebounceerde functie */ function debounce(func, wait = 250, immediate = false) { let timeoutId = null; let lastArgs = null; let lastThis = null; // Cleanup functie voor event listeners const cleanup = () => { if (timeoutId) { clearTimeout(timeoutId); timeoutId = null; } }; // De gedebounceerde functie const debounced = function(...args) { const context = this; lastArgs = args; lastThis = context; const later = () => { timeoutId = null; if (!immediate) { func.apply(context, args); } }; const callNow = immediate && !timeoutId; cleanup(); timeoutId = setTimeout(later, wait); if (callNow) { func.apply(context, args); } }; // Cancel methode om pending execution te annuleren debounced.cancel = cleanup; // Flush methode om direct uit te voeren debounced.flush = () => { cleanup(); if (lastArgs) { func.apply(lastThis, lastArgs); } }; // Is pending check debounced.isPending = () => timeoutId !== null; return debounced; } // Gebruiksvoorbeeld met input event: const searchInput = document.getElementById('search-input'); const resultsContainer = document.getElementById('results'); // De eigenlijke handler functie function handleSearch(event) { const searchTerm = event.target.value.trim(); if (searchTerm.length < 2) { resultsContainer.innerHTML = ''; return; } // Simuleer API call of zware operatie console.log('Zoeken naar:', searchTerm); // fetchResults(searchTerm).then(showResults); } // Debounce de handler met 300ms vertraging const debouncedSearch = debounce(handleSearch, 300); // Event listener toevoegen searchInput.addEventListener('input', debouncedSearch); // Voor cleanup (bijvoorbeeld bij component unmount): // searchInput.removeEventListener('input', debouncedSearch); // debouncedSearch.cancel(); // Optioneel: cancel pending execution ``` **Best practices en optimalisaties:** 1. **Type Safety**: Duidelijke JSDoc comments voor betere IDE ondersteuning 2. **Flexibele Configuratie**: Aanpasbare wait tijd en immediate optie 3. **Memory Management**: Proper cleanup met cancel() methode 4. **Batching**: Voorkomt multiple executions tijdens rapid input 5. **Edge Case Handling**: Werkt correct met `this` context en arguments 6. **Utility Methods**: flush() en isPending() voor geavanceerd gebruik 7. **Performance**: Minimale overhead, gebruikt native setTimeout 8. **Reusable**: Generieke implementatie voor elk type event **Gebruiksscenario's:** - Search inputs met live results - Window resize events - Scroll events - Form validatie - API calls bij user input Deze implementatie is productie-ready en volgt moderne JavaScript best practices.