0

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

9
  • prepare data means, what kind of data Commented Aug 21, 2011 at 7:50
  • What's wrong with your proposed solution? Commented Aug 21, 2011 at 7:50
  • How do you prepare data? where does the data come from? from the server? then it's better you do the preparation in the server itself. Commented Aug 21, 2011 at 7:55
  • @kobe - for example, analyze the cookie and make set Commented Aug 21, 2011 at 7:56
  • @megas depends upon where you are setting cookie , are you doing at server side Commented Aug 21, 2011 at 7:59

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

3 Comments

Well, the parentheses aren't required, the function is already on expression context (LeftHandSideExpression AssignmentOperator AssignmentExpression), it won't cause a SyntaxError, but they are encouraged. :)
@CMS: Ah, yes, you're right, they're only required when you're not using the result (and so you have to make it clear to the parser it's an expression, not a declaration).
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.