JQuery doesn't execute until function is complete in IE8/9 (using Debugger Function)

Question

What happens is: I have an onclick element in IE. Way simpler than previous edits (pared it down a bit).

(css file)#dialog-modal{display:none;height:50px;width:50px;background-color:#000;}(/css)

<div id="dialog-modal" title="sample">xml data</div>
<button type="Button" onClick="makeBox();">Hello</button>


function makeBox(){
    debugger;
    $('#dialog-modal').show();
    debugger;
    console.log($('#dialog-modal').css('display'));
    console.log('hasnt shown');
    debugger;
    console.log($('#dialog-modal').css('display'));
    console.log('still hasnt shown');
    debugger;
    return false;
}

When you execute MakeBox onClick, it doesn't execute the show until the very end of the function, when theoretically it should be executing as it happens, right?

What the problem is, the bigger, more annoying problem, is that when i use onClick, or bind, or jquery or any other method to accomplish this, it always resolves & shows at the very end of the function stack... and I have a rather large function stack that's trying to resolve when it opens, but instead of it being a problem with UI-Dialog (which I originally thought was the problem), it seems the problem is more in the ability to unhide the box until the execution has finished.

I mean, maybe conceptually there's another way to do this, but I click on something, and regardless if I use jq-queue or callbacks, or binds, clicks, mousedowns, in IE8 & 9 (and I assume 7), if debugger in IE works the same as it does in Chrome (which may totally be a possibility, but I can't find that information), then the only possibility is that IE is storing dom manipulation until the function stack clears, and then shoots them out.

My goal is: Click on something. Open Box first, display loading dialog. Crunch a dumb amount of numbers. Insert data in dumb amount of numbers.

Obligatory JSFiddle: http://jsfiddle.net/5A4Nq/31/

Same fiddle, using JQDialog & Open callback (http://jsfiddle.net/5A4Nq/36/)

Make sure you have IE Developer Tools open & start debugging in the script tools.

Versions: JQ-1.7.2

Answer 1

After throwing a bone to the JQuery core team, I eventually determined that the timing of using debugger in IE8 was just... bad.

IE8 indeed never actually completed a dom manipulation task when debugger is ran until the entire stack is finished. It's weird. It's awkward, it's everything we've come to expect about Internet Explorer.