How to debounce on only one workflow instead of all workflows of an element

Ask us anything How do I?
,
1

Hello,

I’d like to trigger two “On change” workflows on an input element, but only have one of them affected by the debounce setting.

Use case: I want to showcase a loader while the user is typing (so ultimately change a boolean variable with workflow #1), but i don’t want my other workflow to fire with each key (as this is calling a backend function). I only want to wait a bit (say 500ms) before the user stops typing to fire workflow #2.

What I’ve tried:

• At the moment I have debounce at 500ms, but of course workflow #1 is not being useful as I need to change the variable immediately after the user starts typing.
• I’ve tried with delays and loops, but this has a major drawback which is delaying doesn’t necessarily mean avoiding to fire. So ultimately I’m delaying the same amount of function calls.
• I tried with a delay and a pass through condition, to avoid all key strokes to fire a function call, but can’t seem to get the timing nor logic right. It also looks clunky (maybe I’m just not getting the timing right? idk).

ChatGPT recommended adding a global function to set a isTyping timer with a timeout function, but I don’t fully understand it.

Any help is truly appreciated!

2

@jose you may try to change the boolean value in workflow #1 with onFocus and onBlur events. This approach however wil showcase a loader while the input field is focused even when user is not typing anything.

3

Thank you for input @Dominic !

Using an “on keydown” trigger on my page seemed to do the trick. The “on keydown” checks whether the event.key is a modifier with a pass through condition, and if it’s not, then it proceeds to change an isTyping boolean global variable for 500ms to then reset it back to false.

This will decouple your isTyping from any input element debounces.

Add-on: I also added an element id to my input element and used it in a pass through condition inside the workflow to check whether my element is currently on focus.

It looks something like this:

Pass through condition with JS:

// List of keys that shouldn’t change the isTyping variable:
const ignoreKeys = [
‘Shift’,
‘Control’,
‘Alt’,
‘Meta’,
‘CapsLock’,
‘ArrowUp’,
‘ArrowDown’,
‘ArrowLeft’,
‘ArrowRight’,
‘Tab’
];

// If the pressed key is one of these, do nothing.
if (ignoreKeys.includes(event.key)) {
return false;
}

// Then check the existing conditions:
return
wwLib.getFrontDocument().activeElement?.id === “inputElementId” {add any other conditions here if you want};

Downside: this is not a true debouncer as the workflow still fires and runs the pass through condition check on every key stroke, but it’s far better than to make a backend call fire on every key stroke (expensive).

2 Likes