Here is one example:
My team wanted to implement a simple debounced auto-save function for our text box input. At first we used
debounce to make it work. It seemed to be working and we launched it. But customers came back with a complaint that typing in the textbox appeared to be jittery. So, here is the old code:
This works when it doesn’t :) e.g. when a user is typing with an interval of about half a second between letters. The app would save the text, and re-render the textbox with the saved text while discarding what they have typed *after* the saving.
To fix the bug, I opted to using vanilla JS’s
setTimeout as follow:
Here we go. Auto-save works now! The
AutoSaveDisplay component you saw above is only a cherry of top bonus to display “saving…” and “saved” when it’s saving your text.