createAsyncDebouncer
Function: createAsyncDebouncer()
function createAsyncDebouncer<TFn>(fn, initialOptions): SolidAsyncDebouncer<TFn>
function createAsyncDebouncer<TFn>(fn, initialOptions): SolidAsyncDebouncer<TFn>
Defined in: async-debouncer/createAsyncDebouncer.ts:59
A low-level Solid hook that creates an AsyncDebouncer instance to delay execution of an async function.
This hook is designed to be flexible and state-management agnostic - it simply returns a debouncer instance that you can integrate with any state management solution (createSignal, etc).
Async debouncing ensures that an async function only executes after a specified delay has passed since its last invocation. This is useful for handling fast-changing inputs like search fields, form validation, or any scenario where you want to wait for user input to settle before making expensive async calls.
Type Parameters
• TFn extends AnyAsyncFunction
Parameters
fn
TFn
initialOptions
AsyncDebouncerOptions<TFn>
Returns
SolidAsyncDebouncer<TFn>
Example
// Basic API call debouncing
const { maybeExecute } = createAsyncDebouncer(
async (query: string) => {
const results = await api.search(query);
return results;
},
{ wait: 500 }
);
// With state management
const [results, setResults] = createSignal([]);
const { maybeExecute } = createAsyncDebouncer(
async (searchTerm) => {
const data = await searchAPI(searchTerm);
setResults(data);
},
{
wait: 300,
}
);
// Basic API call debouncing
const { maybeExecute } = createAsyncDebouncer(
async (query: string) => {
const results = await api.search(query);
return results;
},
{ wait: 500 }
);
// With state management
const [results, setResults] = createSignal([]);
const { maybeExecute } = createAsyncDebouncer(
async (searchTerm) => {
const data = await searchAPI(searchTerm);
setResults(data);
},
{
wait: 300,
}
);
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.