Question

To speed up my application I want to prepare some data before DOM is ready and then use this data when DOM is ready.

Here’s how it might be:

var data = function prepareData(){
  ...
}();

$(document).ready(function() {

   // use data to build page

}

How to prepare the data for later use?
Thanks

Answer 1

You need should use parentheses around the function expression for clarity (and because in a similar situation where you’re defining and calling a function but not using the return value, it would be a syntax error without them). Also, when you use a function expression, you want to not give it a name. So:

var data = (function(){
    ...
})();

or use a function declaration instead:

var data = processData();
function processData() {
    ...
}

(Why not use a name with a function expression? Because of bugs in various implementations, especially Internet Explorer prior to IE9, which will create two completely unrelated functions.)

However, it’s not clear to me what you’re trying to achieve. When the browser reaches the script element, it hands off to the JavaScript interpreter and waits for it to finish before continuing building the DOM (because your script might use document.write to add to the HTML token stream). You can use the async or defer attributes to promise the browser you’re not going to use document.write, on browsers that support them, but…

---

Update: Below you’ve said:

because prepareData is long time function and I assumed that browser can execute this while it’s building DOM tree. Unfortunately ‘$(document).ready’ fires before prepareData is finished. The question is how to teach ‘$(document).ready’ to wait for ready data

The only way the ready handler can possibly trigger while processData is running is if processData is using asynchronous ajax (or a couple of edge conditions around alert, confirm, and the like, but I assume you’re not doing that). And if it were, you couldn’t be returning the result as a return value from the function (though you could return an object that you continued to update as the result of ajax callbacks). Otherwise, it’s impossible: JavaScript on browsers is single-threaded, the ready handler will queue waiting for the interpreter to finish its previous task (processData).

If processData isn’t doing anything asynchronous, I suspect whatever the symptom is that you’re seeing making you think the ready handler is firing during processData has a different cause.

But in the case of asynchronous stuff, three options:

1. If you’re not in control of the ready handlers you want to hold up, you might look at jQuery’s holdReady feature. Call $.holdReady(true); to hold up the event, and use $.holdReady(false); to stop holding it up.

2. It’s simple enough to reschedule the ready handler. Here’s how I’d do it (note that I’ve wrapped everything in a scoping function so these things aren’t globals):

   (function() {
       var data = processData();
   
       $(onPageReady);
   
       function processData() {
       }
   
       function onPageReady() {
           if (!data.ready) {
               // Wait for it to be ready
               setTimeout(onPageReady, 0); // 0 = As soon as possible, you may want a
                                           // longer delay depending on what `processData`
                                           // is waiting for
               return;
           }
       }
   
   })();
   

   Note that I happily use data in the onPageReady function, because I know that it’s there; that function will not run until processData has returned. But I’m assuming processData is returning an object that is slowly being filled in via ajax calls, so I’ve used a ready flag on the object that will get set when all the data is ready.

3. If you can change processData, there’s a better solution: Have processData trigger the ready handler when it’s done. Here’s the code for when processData is done with what it needs to do:

   $(onPageReady);
   

   That works because if the DOM isn’t ready yet, that just schedules the call. If the DOM is already ready, jQuery will call your function immediately. This prevents the messy looping above.