How to execute a function if a loop is taking a long time?

I have an AJAX call, and the result is processed by a callback. This may be real quick, or take some time. If the callback lasts more than 3 seconds, I want to display an image (or a text) that tell the user “please wait!”.

This is what I have:

var process_timer, is_processing = false;
var request = createCORSRequest();
if (request) {
    // This SETTIMEOUT function should execute 3 seconds after REQUEST.SEND()
    process_timer = setTimeout(function(){
        if (is_processing) {
            // It's still processing, so we show the message
            show_please_wait();
        }
    },3000);
    request.onload = function() {
        process(JSON.parse(request.responseText));
        // OK, processing is done, so we reset everything
        is_processing = false;
        // If SETTIMEOUT didn't fire yet, we cancel it so no image will ever show
        clearTimeout(process_timer);
        // We hide the message anyway, just in case it was displayed
        hide_please_wait();
    };
    is_processing = true;
    request.send();
}

What is happening:

  • REQUEST.SEND() works fine
  • REQUEST.ONLOAD() works fine
  • … but the SHOW_PLEASE_WAIT() function never gets executed, no matter how long the process lasts.
    What am I doing wrong?