Debouncing API Calls for Search Inputs in JavaScript

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

// Assume this is your API call function for search
async function searchAPI(query) {
  if (query.trim() === '') {
    console.log('Search query is empty, not calling API.');
    return [];
  }
  console.log(`Calling API for query: "${query}"`);
  // Simulate an API call
  try {
    const response = await fetch(`https://api.example.com/search?q=${encodeURIComponent(query)}`);
    if (!response.ok) {
      throw new Error(`API error: ${response.status} ${response.statusText}`);
    }
    const data = await response.json();
    console.log('API Response:', data);
    return data;
  } catch (error) {
    console.error('Search API call failed:', error);
    return [];
  }
}

// Debounced version of the search API call
const debouncedSearch = debounce(searchAPI, 500); // 500ms delay

// Example Usage with an input field:
// <input type="text" id="searchInput" placeholder="Type to search..." />
// <div id="results"></div>

// Add event listener to an input element
document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.getElementById('searchInput');
  if (searchInput) {
    searchInput.addEventListener('input', (event) => {
      const query = event.target.value;
      // Call the debounced function
      debouncedSearch(query);
    });
  } else {
    console.warn('Element with ID "searchInput" not found. Debounce example won\'t run.');
  }

  // Manual testing without an actual input element:
  // console.log("Manual Debounce Test:");
  // debouncedSearch("apple"); // Should not fire immediately
  // debouncedSearch("app");
  // debouncedSearch("appl");
  // setTimeout(() => debouncedSearch("apple"), 300); // Too soon, will reset timer
  // setTimeout(() => debouncedSearch("apples"), 600); // Should fire after 500ms from this call
  // setTimeout(() => debouncedSearch("applesauce"), 1200); // Should fire after 500ms from this call
});