jQuery:: Do something after my set of functions has been executed. How to do?

Question

Hey,

I have a set of functions, and I want to do something, like show a loading animation, while these functions are running! and when they stop i want to show an alert, for example. All this on jQuery.

Anyone has a tip?

Some abstract code:

//these are my functions:
function a(number){number=number*2};
a(1); a(2); a(3);
//While this functions are running i want to show a gif, for example!
//When the three callings this function has done, i want to show an alert

Answer 1

Like this:

// code to show loading message

function a(number){number=number*2};
a(1); a(2); a(3);

// code to hide loading message

The code is executed from top to bottom, so by the time function are running, the loading message will be showing because it is before those functions and when functions are done, it will hide again.

Answer 2

just before the call to the function display some animation gif on the screen

and just after the call the function remove it and show your alert.

thats it.

Answer 3

Your JavaScript is executed in the same single thread as all other rendering within the document and it is therefore pointless to make a UI change before running a lot of synchronous JS (your functions) only to then reverse the UI change. The UI will remain the same to the user.

Doing what you want would only be useful in situations where asynchronous requests are occurring, and in such situations you would have to rely on callback functions.