Implementing "this is taking too long" message with jQuery

Question

How to implement a gmail-like "this is taking too long" warning message using jQuery Ajax API?

For those who have never seen this message on gmail, it appears when the 'signing in' process takes too long for completion, and then some solutions are suggested.

I'm using jQuery Ajax on my website and I want to warn users when page loading is very slow and then suggest some solutions (a link to refresh the page, or to a help page, for example).

Answer 1

I'd suggest something as simple as this arrangement:

function tooLong() {
    // What should we do when something's taking too long?  Perhaps show a `<div>` with some instructions?
    $("#this-is-taking-too-long").show();
}

// Then, when you're about to perform an action:
function performSomeAction() {
    var timer = setTimeout(tooLong, 10000);
    $.get('/foo/bar.php', {}, function() {
        // Success!
        clearTimeout(timer);
    });
}

Answer 2

Why not just use the built-in jQuery ajax 'timeout' option. It's a good practice to use it anyways, in case you have issues with your ajax call. Or, you could re-invent the wheel ;)

edit: and, er, I think you would want to couple that with an error function.