Implementing Undo/Redo in a Web Application that uses Ajax

Question

The web application I'm working on aims to emulate traditional desktop applications and I'm finding it a challenge to implement Undo/Redo in this environment.

Undo/Redo has been in the specs since the beginning so it's not being tacked on late. It works when I run tests that do not use any of the commands that require interaction with the server. Most commands are handled in the browser and will take no perceptible amount of time to complete. Then there's the remote calls. In most cases the remote call will return in a flash but I have to account for those that don't.

Essentially, because the calls to the server will return asynchronously I am having issues with the commands finishing out of order.

My solution is to block the web application while these long running commands complete. I've tried to find an example of this in some desktop application but have so far come up empty.

Is blocking the application until a command finishes an acceptable solution to my problem?

EDIT A clarification The issue I am trying to solve has more to do with commands that take a long time to complete than server interaction. While a long processing command is running the user is free to continue making changes. These changes might be made on out of date data. I do not have an in browser command that takes a long time to complete so that is why I focused on the remote ajax calls. I apologize if this question is better suited to stackoverflow.

Answer 1

Option #1 - switch to Synchronous

Assuming you are using jQuery, you can set the following option:

$.ajax({
    async: false
});

This will prevent the user from interacting with your app until the app receives and processes the response from the server.

Traditional desktop ctrl+z and such is syncronous but it's just so fast that you wouldn't know otherwise.

Option #2 - keeping it ASYNC

Another idea is to add these AJAX calls to a queue and process them one at a time in the background and display a "Syncing with server, DO NOT LEAVE THIS PAGE!" message somewhere notice-able. until it finishes.