JavaScript changes to style being delayed

I'm running into a little problem that's driving me crazy, and I'd welcome any thoughts as to the cause. At this point I feel like I'm just going 'round in circles.

I have the following code:

function JSsortTable(phase) {
    dynaLoadingDivShow();
    createSortArray();
    dataArr = do2DArraySort(dataArr, orderList, orderDir);
    sortArrayToRs();
    dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
    dynaLoadingDivHide();
}
function dynaLoadingDivShow() {
    document.getElementById('dynaReportGuiWorking').style.display = 'block';
    document.getElementById('dynaReportGuiWorking').style.visibility = 'visible';
}                   
function dynaLoadingDivHide() {
    document.getElementById('dynaReportGuiWorking').style.display = 'none';
    document.getElementById('dynaReportGuiWorking').style.visibility = 'hidden';
}

<div style="visibility:hidden; display:none; z-index:25;" class="tableControlHeader" id="dynaReportGuiWorking">
    Working...
</div>

I call JSsortTable as an onclick event. When I run the above code as is, I never see the div in question. The JSsortTable function takes some 800-2500 ms to run so it's highly unlikely I just missed it the 10+ times I tried. If I change t开发者_如何学Pythonhe style of the div to start out visible, then it will remain visible until after JSsortTable has finished running and then disappear; exactly as expected. So I figured the problem was in dynaLoadingDivShow.

Now, I tried removing dynaLoadingDivHide to see what would happen and found something completely unexpected. The div will not appear when you the JSsortTable function fires. Instead, after all the other code has been run, when JSsortTable finishes, the div becomes visible. It's alomst as though IE (version 8) is saving up all the changes to the DOM and then waiting until the end to paint them. This is, obviously, not the desired behavior.

Anyone have any thoughts on this? I'm only allowed to have IE at work so I haven't tried this on other browsers. I have enough CSS/JS knowledge to be dangerous, but am by no means an expert yet. ;)

Thanks!

You'll need to use a timeout:

function JSsortTable() {
  dynaLoadingDivShow();
  setTimeout(JSortTableWork);
}
function JSortTableWork()
  createSortArray();
  dataArr = do2DArraySort(dataArr, orderList, orderDir);
  sortArrayToRs();
  dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
  dynaLoadingDivHide();
}

Note that I took out the parameter phase because it's not used in the function. If you do need the parameter then you'll need to modify the timeout as

setTimeout(function(){JSortTableWork(phase);});

and also add the parameter to JSortTableWork