export const metadata = { eventPayloads: { GO: { action: () => { alert('Action fired!'); }, }, }, };
Debouncing is a handy tool for lightening the load on heavy tasks. If you have a search box that you want to use for filtering on the server, debouncing will help you deduplicate multiple calls.
Debouncing can be troublesome to implement in vanilla Javascript, but state machines make them quite trivial.
We start off in the idle state. Pressing GO will send us into debouncing.
From there, we have a countdown of two seconds before the action we passed into the event is fired. Which in this case, is alert('Action fired!').
But if we press GO multiple times, we stay in debouncing longer than two seconds, and only the last action we passed in gets fired.