How to Enhance APEX User Interaction with dynamic action execution types Debounce and Throttle

Recently, I was tasked with implementing a delay for a key release (key up) event on an APEX page. The application includes custom search fields where multiple page items trigger key release events to refresh one or more classic reports. When the reports take a significant amount of time to load, it becomes impractical to refresh them every time a key is released. Users prefer to refresh the reports only after they have finished typing. Although an on-change event could be an alternative, I am not particularly fond of it for text filter fields. This is because it requires pressing enter or tabbing to the next item to trigger the event. I prefer to stay in the same field without any additional steps.

I've discovered that you can change the execution type of a dynamic action. By default, the type is set to Immediate. This means the dynamic action will always fire when the event is triggered. For example, when you type the string "lorem ipsum," the key release event is triggered 11 times. Refreshing a report 11 times is not ideal and we should look for other options. Luckily, APEX provides two other types: Debounce and Throttle.

Debounce

By selecting Debounce, the action will only trigger once after a specified time at the end of a single event or a series of events. The image below shows a dynamic action with the type Debounce. In this example, the key release event is only triggered 500ms after the last key release event. For the string "lorem ipsum" from the first example, the event is triggered only once when the maximum time between key releases is 500ms.

Throttle

Selecting Throttle means that actions are triggered at set intervals when the event occurs multiple times. Using the example of "Lorem ipsum," the actions will trigger 11 times, but now with defined intervals. As shown in the image below, the action will run every 250ms for 11 times. The immediate switch allows you to choose whether the first action fires immediately or after the selected time interval.

A footnote: client-side validations are evaluated when the actions are executed, not when the event fires. Therefore, when using the debounce type, the client-side validations are fired only once.

Conclusion

In conclusion, implementing a delay for key release events on an APEX page can significantly enhance user experience by optimizing report refreshes. By utilizing the Debounce and Throttle execution types, developers can control the frequency of dynamic actions, ensuring that reports are refreshed efficiently without unnecessary triggers. Debounce is ideal for scenarios where actions should occur only once after a user has finished typing, while Throttle is suitable for maintaining regular intervals between actions. These techniques not only improve application performance but also align with user preferences for seamless interaction. By understanding and applying these dynamic action types, developers can create more responsive and user-friendly applications.