Debouncer #

Debouncer helps you to debounce asynchronous actions. You can use it in your callbacks to prevent multiple calls of the same action in a short period of time.

Basic usage #

Debounced HxInputText

query:

queryDebounced:

Employees found:

@implements IDisposable
@inject IDemoDataService DemoDataService

<HxInputText Label="Debounced HxInputText"
			 @bind-Value="query"
			 @bind-Value:after="TriggerQuery"
			 BindEvent="BindEvent.OnInput"
			 Placeholder="Search for employees by name" />

<div class="mt-3">query: @query</div>
<div>queryDebounced: @queryDebounced</div>
<div>Employees found: @(String.Join(", ", employees.Select(e => e.Name)))</div>

@code {
	private string query;
	private string queryDebounced;
	private List<EmployeeDto> employees = new();
	private Debouncer queryDebouncer = new Debouncer();

	private async Task TriggerQuery()
	{
		await queryDebouncer.DebounceAsync(millisecondsDelay: 500, actionAsync: async (cancellationToken) =>
		{
			// perform debounced work here

			queryDebounced = query; // just for demo purposes, to show the value
			employees = await DemoDataService.FindEmployeesByNameAsync(query, limitCount: 10, cancellationToken);
		});

		// Do not put any code here as it gets executed for every query-change when the Debouncer finishes its work (cancelation or delayed execution).
	}

	public void Dispose()
	{
		queryDebouncer.Dispose();
	}
}