Debounce logic in Text Input component

Plasmic Studio Questions
1

Hi,

Are there any ways to get the debounce logic in the put ? I have a textbox that’s linked to a component that accepts the text as a props and will call an API every time the props change.

The behavior I want is set the “searchValue” state variable after 500ms of typing in the Input basically

image
image285×120 5.55 KB

image
image294×639 17 KB

2

To store the debounced value of the TextInput in $state.searchValue, you can:

  1. Create a new state variable called timerId
  2. In TextInput’s onChange interaction, add a Run code action, and use the code below:
clearTimeout($state.timerId);

$state.timerId = setTimeout(() => {
  $state.searchValue = val;
}, 1000)

The searchValue will be denounced by 1000ms.

3

I made this change but yes that seems to work!

clearTimeout($state.timerId);

$state.timerId = setTimeout(() => {
  $state.searchValue = event.target.value;
}, 1000)
1 Like