How do I capture what to save if user is allowed to modify content during saving?

Question

I'm creating a TODO list web app and I have a question about how saving the contents of a list should be done. Just like any word processor, I want to allow user to modify data during saving.

I can use a boolean variable to indicate that something was changed by user, ie. TRUE when something was changed, FALSE otherwise. Perhaps, this flag is also used to show user that some data is unsaved. When user saves data by, say pressing Ctrl+S, my app calls a function, then current data in the list is fetched and start saving it to database. At the end, the variable is changed to false. This seems straightforward, but there is an obvious pitfall with this approach. For example.

1. User changes data. The boolean variable becomes TRUE.
2. User presses Ctrl+S.
3. A function is called and it retrieves current data and starts saving it.
4. User changes more data during saving.
5. The function finishes saving and sets the variable to FALSE.

It is easy to see that the flag is set to FALSE as a result even if there is some unsaved data from Step 4. How do word processors/text editors handle this? Do they just disable inputs during saving, but it is quick enough that I don't see it??

Answer 1

Have a revision field in the browser. Also, have a saved_revision field. When document saving begins, your code memorizes the current revision and when saving is complete, it bumps saved_revision up to that value. Every time the user changed something, revision increments by one. For checking whether all changes are saved, check whether revision == saved_revision. Something like this:

var revision = 0
var saved_revision = 0

function handle_keypress() {
  revision++
  update_document_saved_display()
  /* ... */
}

function save() {
  var saving_rev = revision
  upload_version(serializeDocument(), function(status) {
    if (status === 'ok') {
      saved_revision = saving_rev
      update_document_saved_display()
    }
  })
}