Fire event after all Javascript has finished executing

Question

I have a page that uses a lot of javascript calculations when the page loads. This can lock the page up for a few minutes depending on how many calculations are performed.

I can open a jquery modal box on page load. The calculation functions then fire and then then once they are finished they modal box should close.

The problem the box is closing almost immediately after it is shown. The code I am using is here:

// In page startup functions
$(document).ready(function() {
    // Initialise Modal
    $('#dialog').jqm({ modal: true });
    // Show Modal box
    $('#dialog').jqmShow();
    // Call all the startup functions and then hide the modal box
    // once they have all completed.
    StartUpCall((function() { $('#dialog').jqmHide(); })())
});

Is there an event that jQuery fires once all javascript has been completed? That would be first prize for me.

Edit: I am using jqModal - http://dev.iceburg.net/jquery/jqModal/

Answer 1

I am not sure I understand your question and the title is also confusing. Are you sure that the calculations run synchronously? Are you using Ajax calls? If yes, then the hide call will run before the calculations finish.

Anyway, jQuery supports custom events, which you can create and programmatically trigger. Have a look at this link for example. This would be an elegant solution for your situation. Since you can also send parameters with the events, you could also easily update the status of the modal dialog.

Answer 2

I would use a global variable and a callback function. The global variable is either a counter or an array of strings. At the beginning of each calculation either increment the counter or add a unique string to the array, and at the end of each calculation decrement the counter or remove the unique string and call a function that either checks for counter==0 or array.length==0, at which point you hide your dialog.

Answer 3

After you pop up the modal dialog, use a setTimeout() to call your processor-intensive code. The hide should be at the end of that code (the processor-intensive code, not the calling code). You can use 0 for the delay in setTimeout. Only one thread of JavaScript is running (ignoring WebWorkers.)

Be aware that different browsers have different tolerance for how long they let the script run before they throw up a "script unresponsive" alert. You may have to break down your calculations into chunks launched by setTimeout. IIRC, IE6 (which has a painfully slow JS, compounding the problem) will time out very quickly.