I'm building an AJAX app that constantly saves to the server when the user changes things. Every time the user changes something, I want a status area to say "Saving..." (with animated ellipses) and then change back to "Saved" at the callback (when the server returns)
In theory this is easy enough, because I could change the status area's text when the user changes something, and change the status area's text back when the callback finishes. However, there are a few of issues with this:
This is an asynchronous application, so the user could performing a new action before the callback is complete. And, one callback could complete while the app is still saving.
I don't want to immediately change the text back on callback... I would like "Saving..." to have a small opportunity to animate.
To add to the complexity, I use setInterval to animate the saving message.
You can see an example of my issues here:
Click the link once, everything looks nice. Click the link several times in a row, and you will see that it gets stuck on "Saving..."
Any ideas on a better way to do this?