Black Lives Matter. Please consider donating to Black Girls Code today.

Input Text Callbacks - How do I delay the update process?

This might be a beginner question but,

I have a text input that feeds a graph. When I am typing it automatically refreshes. Because, the function it runs moves slower than my typing (Which means it moves slower than many peoples typing), the graph is constantly refreshing and ends up lagging way behind.

Is there way to make it wait for you to stop typing for at least, say, 1 second? That way when it reruns it is where you last left off.

I suppose I could accept it just refreshing every 1 second. But I’d prefer for it to somehow detect the delay in type speed (Or possibly both. example: every 1 second or .2 second delay in typing)

Thanks in advance!

You could store the time stamp of the last update (e.g. in a Store component) and compare it to current time in the callback, which is triggered by the text input. If the time difference is < 2s, return dash.noupdate, otherwise update the graph.

@Emil I haven’t worked with Store before, Is there a best practice way to do this? Os should I just look at the docs and break it until it works right?

It’s just a component for storing data, here is the doc

you could set debounce=True which will then prevent the callback firing until Enter Key is pressed.

1 Like