Question

The following works correctly:

alert("start");
loadData(); // takes a while
alert("finished");

loadData() is a method that inserts large amounts of data into a table in the DOM and takes a few seconds.

This, however, does not work as expected:

document.getElementById("mydiv").style.display = "block";
loadData(); // takes a while
document.getElementById("mydiv").style.display = "none";

The data is loaded into the table without displaying mydiv until the loading is completed and then mydiv is quickly displayed and gone.

But this works like it’s supposed to:

document.getElementById("mydiv").style.display = "block";
alert("start");
loadData(); // takes a while
alert("finish");
document.getElementById("mydiv").style.display = "none";

mydiv is displayed, the alert dialog is shown, the data is loaded into the table, and then mydiv disappears, as expected.

Anyone know why the second code section above does not work properly?

Answer 1

I dont know the exact reason, but i can think of is that LoadData is a heavy function so browser is busy evaluating that, so it holds the rendering. When u give alert in between it provides sufficient time to render div and then evaluate LoadData.

Work Around:

function LoadData()
{
//Show Div here
//window.setTimeout(newFunc,100);
}

function newFunc()
{
 //Do data operations here
 //Hide Div
}