Javascript: Trigger action on function exit

Question

Is there a way to listen for a javascript function to exit? A trigger that could be setup when a function has completed?

I am attempting to use a user interface obfuscation technique (BlockUI) while an AJAX object is retrieving data from the DB, but the function doesn't necessarily execute last, even if you put it at the end of the function call.

Example:

function doStuff()
{
blockUI();
ajaxCall();
unblockUI();
};

Is there a way for doStuff to listen for ajaxCall to complete, before firing the unBlockUI? As it is, it processes the function linearly, calling each object in order, then a separate thread is spawned to complete each one. So, though my AJAX call might take 10-15 seconds to complete, I am only blocking the user for just a split-second, due to the linear execution of the function.

There are less elegant ways around this...putting a loop to end only when a return value set by the AJAX function is set to true, or something of that nature. But that seems unnecessarily complicated and inefficient.

Answer 1

Your AJAX call should specify a callback function. You can call the unblockUI from within the callback.

SAJAX is a simple AJAX library that has more help on how to do AJAX calls.

There's also another post that describes what you're looking for.

Answer 2

You can do a synchronous xhr. This would cause the entire UI block for the duration of the call (no matter how long it might take).

Answer 3

However you're accomplishing your Ajax routines, what you need is a "callback" function that will run once it's complete:

function ajaxCall(callback){
    //do ajax stuff...
    callback();
}

Then:

function doStuff(){
    blockUI();
    ajaxCall(unblockUI);
}

Answer 4

You need to redesign your program flow to be compatible with asynchronus flow, like specifying a callback function to be called after the response is processed. Check out how Prototype or JQuery or ... accomplishes this.

Answer 5

The answer is simple, you have to call unblockUI() when your ajax request returns the result, using jQuery you can do it like this:

function doStuff(){

    blockUI();

    jQuery.ajax({
        url: "example.com",
        type: "POST",           //you can use GET or POST
        success: function(){

            unblockUI();
        }
    });
}

Answer 6

It sounds to me that you want the user to wait while info is being fetched from the db. What I do when I make an Ajax call for some info from the database is to display an animated gif that says "getting it..." - it flashes continually until the info is retrieved and displayed in the webpage. When the info is displayed, the animated gif is turned off/hidden and the focus is moved to the new info being displayed. The animated gif lets the user know that something is happening.