Debounce

Stable Version 1.0.0 (OutSystems 11)
Published on 24 Apr by 
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.

Reviews (0)
Category
UI & Widgets
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Vincent Koning who created this component.
Dependencies
Debounce has no dependencies.
Requirements
Platform:
11.0.606.0
Database:
All
Stack:
.NET
Component Consumers
No consumers yet.
Weekly Downloads 
More from Vincent Koning