De debounce-functie in JavaScript zorgt ervoor dat een functie wordt uitgesteld totdat er een bepaalde periode is verstreken sinds de laatste keer dat de functie werd aangeroepen. Dit is handig om te voorkomen dat een functie te vaak wordt uitgevoerd, bijvoorbeeld bij het scrollen, invoer in een zoekveld, of resize-events. Hoe het werkt: - Wanneer de gedebounceerde functie wordt aangeroepen, wordt een timer gestart. - Als de functie binnen de ingestelde tijd opnieuw wordt aangeroepen, wordt de timer gereset. - Pas als de timer afloopt zonder dat de functie opnieuw wordt aangeroepen, wordt de echte functie uitgevoerd. Dit voorkomt dat de functie te vaak wordt uitgevoerd en verbetert de prestaties. Voorbeeld van een debounce-functie: ```javascript function debounce(func, delay) { let timeoutId; return function(...args) { if (timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(() => { func.apply(this, args); }, delay); }; } ``` Gebruikvoorbeeld: ```javascript function zoekOp(input) { console.log('Zoeken naar:', input); } const gebufferdeZoek = debounce(zoekOp, 300); // Stel dat deze functie wordt aangeroepen bij elke toetsaanslag document.querySelector('input').addEventListener('input', (e) => { gebufferdeZoek(e.target.value); }); ``` In dit voorbeeld wordt de zoekfunctie slechts één keer uitgevoerd, 300 ms nadat de gebruiker stopt met typen, in plaats van bij elke toetsaanslag. Hierdoor wordt onnodige zoekopdrachten voorkomen en de prestaties verbeterd.

Een debounce functie is een JavaScript-techniek die de uitvoering van een functie vertraagt totdat een bepaalde tijd is verstreken sinds de laatste aanroep. Dit is vooral nuttig om prestatieproblemen te voorkomen bij veelvuldige gebeurtenissen. **Hoe het werkt:** - Wanneer een gebeurtenis plaatsvindt, start een timer - Als dezelfde gebeurtenis opnieuw plaatsvindt voordat de timer afloopt, wordt de timer gereset - De functie wordt alleen uitgevoerd wanneer de timer volledig afloopt **Voorbeeld implementatie:** ```javascript function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } ``` **Gebruiksvoorbeelden:** 1. **Zoekveld met suggesties:** ```javascript const searchInput = document.getElementById('search'); const debouncedSearch = debounce((query) => { console.log('Zoekopdracht uitvoeren:', query); // API call naar zoekserver }, 300); searchInput.addEventListener('input', (e) => { debouncedSearch(e.target.value); }); ``` 2. **Window resize events:** ```javascript const debouncedResize = debounce(() => { console.log('Window grootte:', window.innerWidth); // Layout aanpassingen }, 250); window.addEventListener('resize', debouncedResize); ``` 3. **Formulier validatie:** ```javascript const emailInput = document.getElementById('email'); const debouncedValidate = debounce((email) => { console.log('Valideren email:', email); // Email validatie logica }, 500); emailInput.addEventListener('input', (e) => { debouncedValidate(e.target.value); }); ``` **Voordelen:** - Vermindert onnodige API calls - Verbeterde prestaties bij veelvuldige events - Voorkomt "flickering" of overmatige UI updates De debounce tijd (bijv. 300ms) kan worden aangepast afhankelijk van de use case - korter voor responsive UI, langer voor API calls.