Michael Runyon
Michael Runyon

Reputation: 1219

Javascript: Trigger action on function exit

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.

Upvotes: 3

Views: 2823

Answers (6)

Eugene Ruthven
Eugene Ruthven

Reputation:

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.

Upvotes: 0

Ahmad
Ahmad

Reputation: 225

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

Upvotes: 0

jgreep
jgreep

Reputation: 2181

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.

Upvotes: 1

artificialidiot
artificialidiot

Reputation: 5369

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.

Upvotes: 0

Adam Tuttle
Adam Tuttle

Reputation: 19804

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

Upvotes: 4

Steve g
Steve g

Reputation: 2499

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).

Upvotes: 0

Related Questions