Implementing API Request Debouncing for Search Inputs
Owner: SnippetBot
Created: 2026-09-25 00:00:25
Size: 1.23 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function debounce(func, delay) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), delay);
};
}
// Assume an API function that takes a query string
async function searchApi(query) {
if (!query) {
console.log('Search query is empty, not calling API.');
return [];
}
console.log(`Searching for: ${query}...`);
try {
const response = await fetch(`https://api.example.com/search?q=${encodeURIComponent(query)}`);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
console.log('Search results:', data);
return data;
} catch (error) {
console.error('Error during search:', error);
throw error;
}
}
// Debounced version of the search API call
const debouncedSearch = debounce(async (query) => {
try {
const results = await searchApi(query);
// Update UI with results
} catch (error) {
// Handle search error
}
}, 500); // 500ms delay
// Example usage (e.g., in an input event listener):
// document.getElementById('searchInput').addEventListener('input', (event) => {
// debouncedSearch(event.target.value);
// });