Debounce & Throttling

Debouncing and throttling are two techniques to limit the number of times a function is called. They are often used in scenarios where a function is called frequently, such as in response to user input.

Throttling#

<div
    data-signals="{tick:0}"
    data-on-raf__throttle.500ms="tick.value = (new Date()).getTime()"
>
    <div data-text="tick.value"></div>
</div>

In the example above, the data-on-raf__throttle.500ms directive ensures that the tick value is updated at most once every 500ms. If the value is updated more frequently, the updates are ignored until the 500ms delay has passed.

Debouncing#

Debounced button clicked times

<button
    data-signals="{clicks:0}"
    data-on-click__debounce.500ms="clicks.value++"
>
    Debounced button clicked
    <span data-text="clicks.value"></span>
    times
</button>

In the example above, the data-on-click__debounce.500ms directive ensures that the click handler is only called once every 500ms. If the button is clicked multiple times within 500ms, the click handler will only be called once after the 500ms delay with no additional clicks.