These examples, which come from a variety of sources, illustrate the versatility of the package to help you solve typical challenges in web application development.
Have a look at the trailing edge demo.
Source: https://css-tricks.com/debouncing-throttling-explained-examples/#aa-debounce
Many resize events are emitted when resizing a (desktop) browser window. However, we can use a trailing edge debouncer to perform an action once the user stops resizing the browser since we are usually only interested in the final size of the window.
Have a look at the resize example.
Source: https://css-tricks.com/debouncing-throttling-explained-examples/#aa-resize-example
Why send HTTP requests to the server, every 50ms, when the user is still typing? A trailing edge debouncer can help us avoid making too many server requests by only sending a request when the user stops typing.
Have a look at the HTTP input example.
It illustrates asynchronous and debounced validation. A user can enter their username and 500ms after the user stops typing a validation request is sent to a server to check if the username is free. If the user starts typing again then the previous validation request is cancelled.
Have a look at the registration form example.
Source: https://github.com/Orasund/elm-cookbook/issues/1#issue-456089065
Search the Interpol Red Notices API and debounce the input to make it feel smooth and reduce network requests.
Have a look at the red notices example.
Source: https://youtu.be/PySFIsgXNZ0
Have a look at the leading edge demo.
Source: https://css-tricks.com/debouncing-throttling-explained-examples/#aa-leading-edge-or-immediate
If a user has hand tremors then when they attempt to click a button they may unintentionally press it multiple times in quick succession. We want their first click to yield an immediate response but subsequent clicks to be ignored until a certain amount of time has passed since they last clicked the button.
Have a look at the counter example.
Source: https://discourse.elm-lang.org/t/how-to-do-debouncing/8637
Have a look at the throttle demo.
As the user scrolls we check how far they are from the bottom of the page. If they are near the bottom then we load more content and append it to the page. It gives the illusion of an infinitely long page.
Have a look at the infinite scroll example.
Source: https://css-tricks.com/debouncing-throttling-explained-examples/#aa-infinite-scrolling
This example is similar to the infinite scroll example above, but, instead of handling the scroll events on an element we use a port to manage the scroll events on the document.
Have a look at the document infinite scroll example.
Source: https://css-tricks.com/debouncing-throttling-explained-examples/#aa-infinite-scrolling