Debounce

Stable Version 1.0.2 (Compatible with OutSystems 11)
Published on 04 September 2020 by 
5.0
 (4 ratings)

Debounce

Details
With Debounce you can easily and quickly add a method to wait for the user input to stop for a certain time before you take another action, like calling a API or storing data in the database. This is a pure javascript implementation. JQuery is not used.
Read More

What is debouncing?

Debouncing is a method to hold an OnChange action for a certain set period of time. If any change is made to the attached input box the timer resets and starts to wait again before triggering the needed action.

Why would I use debouncing?

You want to use debouncing when the user input directly affects an external system or starts an action that causes a lot of pressure on the local system. This component is useful when you want to use an preview of the selected data but expect that end-users will not directly select the correct screen entity. Instead of directly getting all needed resources after a click (like getting a photo, a list of names, etc) you wait for a set period of time (default is 350ms). This allows end-users to select something else or add data before you start an expensive action.

How do I use it?

  1. Add an input box to the screen and give it a name
  2. Add the debounce widget to the screen and bind it to the input box via it's Id
  3. Add an action (required) to the debounce widget
  4. Create the needed flow inside this action to perform all steps needed

Example

In the underneath example you can see the effect of debounce. For every character types an OnChange event is triggered. Without debouncing this would result in 8 API calls but with debouncing we only execute the API once and get relevant data at the first try greatly reducing pressure on the back-end.

What’s new (1.0.2)

CHANGED:

  • Cleaned the javascript
  • Added a console warning when the Debounce widget is being bound to an unsupported widget
  • Changed the demo to reflect these changes
Reviews (1)
2020-12-09
in version 1.0.2
Great component to use in Reactive applications to avoid unnecessary server calls. Very easy to implement.
More from Vincent Koning