Question

I’ve got a sequence of Javascript function calls in a function I have defined to be executed when a web doc is ready. I expected them to be executed in sequence, as one ends the next begins, but the behaviour I see doesn’t match up with that.

Additionally there is manipulation of the graphical components going on in between the calls (for example, I add in a checkpoint time to draw on a div on the page inbetween each of the mentioned calls) but those redraws aren’t happening in sequence… they all happen at once.

I’m a bit of a n00b with the whole javascript-in-the-browser thing, is there an obvious mistake I’m making, or a good resource to go find out how to do this stuff?

---

Update – sample

// called onReady()
function init() {
    doFirstThing();
    updateDisplayForFirstThing();
    doSecondThingWithAjaxCall();
    updateDisplayForSecondThing();
    ...
    reportAllLoaded();
}

Answer 1

IE won’t update the display until the current script is finished running. If you want to redraw in the middle of a sequence of events, you’ll have to break your script up using timeouts.

If you post some code we can help refactor it.

edit: here’s a general pattern to follow.

function init() { 
    doFirstThing(); 
    updateDisplayForFirstThing(); 
} 

function updateDisplayForFirstThing() {
    // existing code
    ... 

    // prepare next sequence
    var nextFn = function() {
        // does this method run async? if so you'll have to 
        // call updateDisplayForSecondThing as a callback method for the 
        // ajax call rather than calling it inline here.
        doSecondThingWithAjaxCall(); 

        updateDisplayForSecondThing();     
    }

    setTimeout(nextFn, 0);
}

function updateDisplayForSecondThing() {
    // existing code
    ... 

    // prepare next sequence
    var nextFn = function() {
         // continue the pattern 
         // or if you're done call the last method
         reportAllLoaded(); 
    }
    setTimeout(nextFn, 0);
}