ansaurus

Question

Implementing "this is taking too long" message with jQuery

Answer 1

+7 A:

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);
    });
}

VoteyDisciple 2009-09-04 01:36:06

The argument to clearTimeout should be the return value from setTimeout (the timer handle), not the method to be invoked when the timer expires.

tvanfosson 2009-09-04 01:43:07

Actually, `clearTimeout` expects timeout id, not the function object as you have it here.

kangax 2009-09-04 01:44:37

I've understood the logic and the timeout arrangement, but how setTimeout function works and in which cases it is applicable? I couldn't find it on jQuery documentation.

fjsj 2009-09-04 01:45:32

@fjsj - setTimeout is pure javascript, it's not part of jQuery. Try http://www.w3schools.com/htmldom/met_win_settimeout.asp

tvanfosson 2009-09-04 01:56:48

Wow: I completely blanked on `clearTimeout` there. I've edited in the fix. fjsj: `setTimeout` is a built-in JavaScript function; it's not part of jQuery. You can find documentation and plenty of examples through Google. All it does is schedule a function to be called some number of milliseconds in advance (in my example 10000 milliseconds, or 10 seconds). `clearTimeout` cancels that scheduled event.

VoteyDisciple 2009-09-04 01:56:49

@Votey - I stomped on your edit -- feel free to roll mine back if you made other changes.

tvanfosson 2009-09-04 01:58:00

Answer 2

A:

You could use the ajaxStart() and ajaxStop() messages to show() and hide() your loading indicator.

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

 $("#loading").ajaxStop(function(){
   $(this).hide();
 });

jrummell 2009-09-04 01:45:43

I don't want to show a loading indicator. I need to show it only when loading time takes too long (something like a timeout).

fjsj 2009-09-04 01:57:23

I missed that part. I would go with VoteyDisciple's answer.

jrummell 2009-09-04 02:19:42

Answer 3

+2 A:

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.

jonstjohn 2009-09-04 02:00:34

+1 if you are already using the $.ajax method that allows an error callback. If you'd otherwise use get/load/post and only want the this is taking too long message, then using set/clearTimeout would be acceptable.

tvanfosson 2009-09-04 02:21:31

You can also use the $.ajaxSetup method - that will affect all ajax calls.

jonstjohn 2009-09-04 13:08:00

Bear in mind that the timeout error within $.ajax will actually stop looking for a response from the server, as a result it would be "this couldn't be processed" as opposed to what the OP wanted which is "this is taking too long".

jakeisonline 2009-10-13 08:07:29

Answer 4

+2 A:

the jQuery loading plugin i wrote does this as a default option. here's the demo:

http://jquery-values.googlecode.com/svn/other/loading/jquery.loading.htm

http://plugins.jquery.com/project/loading

Nathan Bubna 2009-09-07 22:58:34

ansaurus

tags:

views:

answers:

Implementing "this is taking too long" message with jQuery

related questions