0

I'm doing an AJAX call (regular JS) and, if it takes more than, say, 500 milliseconds, I'd like to put up my "Please Wait" box.

Normally, if I want to put up the PW box immediately, I'd do:

// show semi-transparent grey screen to block access to everything underneath
divGreyCoverAllNode.style.display = 'inline';
// show PW box. Prior to these lines, both coverall and PW were display=none
divPleaseWaitNode.style.display = 'inline';

// now do the AJAX and follow-up inside a zero timer; the timer is necessary to
// make the system pause to display the screen changes we previously invoked 

setTimeout( function() {
        // do my ajax call here, then after the call...
        // take down the PW stuff
        divPleaseWaitNode.style.display = 'none';
        divGreyCoverAllNode.style.display = 'none';
    },
    0
);

Like I stated above, what I'd like to do is have the PW displayed only if AJAX doesn't finish in, say, 500 milliseconds. Ideally it would be something like:

// set a timer to display PW in 500 milliseconds
myTimeEvent = setTimeout( function() {
        divGreyCoverAllNode.style.display = 'inline';
        divPleaseWaitNode.style.display = 'inline';
    },
    500
);

// do my ajax call here, then after the call...
clearTimeout(myTimeEvent);
// take down the PW stuff, in case it was displayed
divPleaseWaitNode.style.display = 'none';
divGreyCoverAllNode.style.display = 'none';

But I can't seem to get the system to pause and display the PW when AJAX is taking its time. I've tried surrounding the AJAX-and-follow-up block in a zero timer, but no deal.

Any suggestions?

EDIT: Important fact: This is not an asynch ajax call. It's an unusual situation that requires everything to wait on the ajax result.

2
  • Did you put the clearTimeout in the response part of the ajax call? It's not clear in your question
    – Mike
    Sep 7, 2011 at 15:27
  • clearTimeout comes immediately after I get the result of the AJAX call. It's not part of the onreadystatechange function. But this is a rather odd ajax call, in that it is not asynch.
    – Jonathan M
    Sep 7, 2011 at 15:28

4 Answers 4

2

Given that you are making a synchronous XHR call, you can't. That's the nature of synchronouseverything stops until the call completes. When you use a synchronous XHR request, not only is the JavaScript event loop stopped, you actually freeze the entire browser UI (in IE and Firefox < 3).

That said, you're doing it wrong. 8.4% of reported IE9 hangs last month were due to synchronous XHR. There really is no such thing as ‘an unusual situation that requires use of synchronous XHR requests.’ Make your request, then act on the data you get in the callback function.

Instead of something like:

// Do stuff, then when you need a request:
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send();
// Do more stuff
alert(xhr.responseText);

You need:

// AJAX helper
function req(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) callback(xhr);
  }
}


// Your code.  Do stuff, then when you need an AJAX request:
req(url, function(xhr) {
  // Do more stuff
  alert(xhr.responseText);
});

Obviously this needs refined, but this illustrates the proper way to make an AJAX request.

4
  • So, since this is a process that I have to have complete before the user does anything else, the way to do it asynchronously is: 1: Show PW to make object inaccessible to user, 2: Make AJAX call with callback to remove PW after processing. Right?
    – Jonathan M
    Sep 7, 2011 at 17:58
  • What's the object you need to prevent interaction with? If it's a form, I'd just disable all of the elements within the form until everything is ready. Remember, using an overlay only prevents mouse interaction -- it's still possible to use the keyboard. I do like that you want to wait a bit before showing "please wait" -- I remember seeing some research (I can't find a link right now) that showed users will perceive your app as faster if you don't show any kind of "loading..." indicator when it's a fast load. After n ms, you need an indicator so they know something is happening.
    – josh3736
    Sep 7, 2011 at 19:25
  • It's two forms, a CSS menu, and some header logos with associated links, a few links on the page itself. There's quite a bit going on with the page.
    – Jonathan M
    Sep 7, 2011 at 19:37
  • Disabling the forms might be a challenge in plain JS (with jQuery, you could just do $('form *').attr('disabled','disabled');), you could add a disabled class to your menu and add some CSS to prevent it from opening. I'd do something similar for links -- add a disabled class and then have something like $('a').live('click', function(e) { if ($(this).hasClass('disabled') e.preventDefault(); });
    – josh3736
    Sep 7, 2011 at 20:12
0

It shouldn't come after the ajax call, it should come inside the callback function. AJAX requests are asynchronous with the rest of the code, you should preform actions you want upon completion inside the callback part of your request.

2
  • Sorry, I just added an edit. My bad for not pointing this out in the first place. This ajax is unusual in that it is not asynch. Everything waits on the result.
    – Jonathan M
    Sep 7, 2011 at 15:32
  • I could still add clearTimeout into the onreadystatechange function, but I'm not sure how that would help the PW to show up in the first place.
    – Jonathan M
    Sep 7, 2011 at 15:34
0

take a look at BlockUi. If that doesn't look like it will work for you, you could try using

$(document).ajaxStop(DoSomething()); 
5
  • Thanks. I'm not using jQuery, though.
    – Jonathan M
    Sep 7, 2011 at 15:35
  • 1
    any particular reason why not? I mean jquery even has $fn.solveWorldHunger() and $fn.PeaceForEveryOne() :)
    – Eonasdan
    Sep 7, 2011 at 15:41
  • The entire customer site is pure JS. Change over is a more massive effort than is worth it. This can be done in pure JS; Resig did it. :)
    – Jonathan M
    Sep 7, 2011 at 15:44
  • 1
    you don't have to change everything over. you don't even have to use jquery in any other page. jquery is still javascript, it's just a library on top of javascript. I'm sure it can be done in POJ but sometimes is about getting on with it and not rewriting code (for me anyway)
    – Eonasdan
    Sep 7, 2011 at 16:08
  • Good points. I think I'm going to stick with POJ on this project anyway. It has given me insights on numerous occasions as to what is actually happening behind the scenes with jQuery. That's valuable.
    – Jonathan M
    Sep 7, 2011 at 18:07
0

Take a Look at jQuery Timeout

1
  • 1
    I'm not using jQuery, but tell me a bit more about how this might help the PW box appear. Maybe I can steal some ideas from the code. :)
    – Jonathan M
    Sep 7, 2011 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.