Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Limit request frequency for typing and scrolling.
Debouncing & Throttling Requests is easiest to learn by reading the example, changing it, and observing the result.
function debounce(fn, wait = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), wait);
};
}
search.addEventListener('input', debounce(async (e) => {
const res = await fetch('/api/search?q=' + encodeURIComponent(e.target.value));
renderResults(await res.json());
}, 300));Practice the Debouncing & Throttling Requests example in a small scratch file, then explain what changed and why.