import { modulate } from '@danielhaim/modulator'; // or import default Modulator from '@danielhaim/modulator'; // If using the object wrapper (less common now) async function myAsyncFunction(query) { console.log('Executing with:', query); // Simulate work await new Promise(res => setTimeout(res, 50)); if (query === 'fail') throw new Error('Failed!'); return `Result for ${query}`; } const debouncedFunc = modulate(myAsyncFunction, 300); debouncedFunc('query1') .then(result => console.log('Success:', result)) // Logs 'Success: Result for query1' after 300ms .catch(error => console.error('Caught:', error)); debouncedFunc('fail') .then(result => console.log('Success:', result)) .catch(error => console.error('Caught:', error)); // Logs 'Caught: Error: Failed!' after 300ms // Using async/await async function run() { try { const result = await debouncedFunc('query2'); console.log('Async Success:', result); } catch (error) { console.error('Async Error:', error); } } run();

const { modulate } = require('@danielhaim/modulator'); const debouncedFunc = modulate(/* ... */); // ... usage is the same

requirejs(['path/to/modulator.amd'], function(Modulator) { const debouncedFunc = Modulator.modulate(myFunction, 200); // ... });

function handleInput(value) { console.log('Processing input:', value); // e.g., make API call } // Debounce to run only 500ms after the user stops typing const debouncedHandleInput = modulate(handleInput, 500); searchInput.addEventListener('input', (event) => { debouncedHandleInput(event.target.value) .catch(err => console.error("Input Error:", err)); // Optional: Catch potential errors });

function handleClick() { console.log('Button clicked!'); // Perform action immediately, but prevent rapid re-clicks } // Trigger immediately, then ignore calls for 1000ms const debouncedClick = modulate(handleClick, 1000, true); myButton.addEventListener('click', () => { debouncedClick().catch(err => { // Only log if it's not a cancellation error, as we don't cancel here if (err.message !== 'Debounced function call was cancelled.') { console.error("Click Error:", err); } }); });

async function searchAPI(query) { if (!query) return []; // Handle empty query console.log(`Searching API for: ${query}`); const response = await fetch(`/api/search?q=${query}`); if (!response.ok) throw new Error(`API Error: ${response.statusText}`); return response.json(); } const debouncedSearch = modulate(searchAPI, 400); const statusElement = document.getElementById('search-status'); // Assume element exists const searchInput = document.getElementById('search-input'); // Assume element exists searchInput.addEventListener('input', async (event) => { const query = event.target.value; statusElement.textContent = 'Searching...'; try { // debouncedSearch returns a promise here const results = await debouncedSearch(query); // Check if query is still relevant before updating UI if (query === searchInput.value) { statusElement.textContent = `Found ${results.length} results.`; // Update UI with results } else { console.log("Query changed, ignoring results for:", query); } } catch (error) { // Handle errors from searchAPI OR cancellation errors if (error.message === 'Debounced function call was cancelled.') { console.log('Search cancelled.'); // Status might already be 'Searching...' which is fine } else { console.error('Search failed:', error); statusElement.textContent = `Error: ${error.message}`; } } }); // Example of cancellation (Alternative approach combining input/cancel) let currentQuery = ''; searchInput.addEventListener('input', async (event) => { const query = event.target.value; currentQuery = query; statusElement.textContent = 'Typing...'; // Cancel any previous pending search before starting a new one debouncedSearch.cancel(); // Cancel previous timer/promise if (!query) { // Handle empty input immediately statusElement.textContent = 'Enter search term.'; // Clear results UI return; } // Only proceed if query is not empty after debounce period try { statusElement.textContent = 'Waiting...'; // Indicate waiting for debounce // Start new search (will wait 400ms unless cancelled again) const results = await debouncedSearch(query); // New promise for this call // Re-check if the query changed *after* the await completed if (query === currentQuery) { statusElement.textContent = `Found ${results.length} results.`; // Update UI } else { console.log('Results ignored, query changed.'); // Status might remain 'Typing...' from next input event } } catch (error) { // Handle errors from the awaited promise if (error.message !== 'Debounced function call was cancelled.') { console.error('Search failed:', error); statusElement.textContent = `Error: ${error.message}`; } else { // Ignore cancellation errors here as we trigger cancel often console.log('Search promise cancelled.'); } } });

function saveData() { console.log('Saving data to server...'); // API call to save return Promise.resolve({ status: 'Saved' }); // Example return } // Debounce saving by 1 second, but ensure it saves // at least once every 5 seconds even if user keeps typing. const debouncedSave = modulate(saveData, 1000, false, null, 0, 5000); // No cache, maxWait 5s const saveStatus = document.getElementById('save-status'); // Assume element exists const textArea = document.getElementById('my-textarea'); // Assume element exists textArea.addEventListener('input', () => { saveStatus.textContent = 'Changes detected, waiting to save...'; debouncedSave() .then(result => { // Check if still relevant (optional) saveStatus.textContent = `Saved successfully at ${new Date().toLocaleTimeString()}`; console.log('Save result:', result); }) .catch(err => { if (err.message !== 'Debounced function call was cancelled.') { console.error("Save Error:", err); saveStatus.textContent = `Save failed: ${err.message}`; } else { console.log("Save cancelled."); // Status remains 'waiting...' or might be updated by next input } }); });