I have a problem i'm thinking might be related to execution order as
discussed in this thread.
<!-----test.html------>
<a href="javascript:jsFunction()">Run Test</a>
<div id="notification" style="display: none; background: black; font:
white"></div>
<script>
function jsFunction() {
document.getElementById("notification").innerHTML = "test
notification";
document.getElementById("notification").style.display = "";
//window.alert("test");
var x = 0;
while (x<2099999) {
x++;
}
document.getElementById("notification").innerHTML = ""
document.getElementById("notification").style.display = "none";
}
</script>
<!--end-->
It is not connected with the execution order per se but it is connected
with *synchronized* methods (more exactly - with the absence of such)
in the standard ECMAScript.
Here we have two independent system: script context and browser
rendering engine. Script cannot directly manipulate the rendering
engine - it just places requests to change rendering options (like
style.display) and continues its execution. If immediately after that
the script goes in some overly intensive process (like your loop), the
rendering engine never gets enough time to refresh the page so it just
holds on that until the script will get less demanding for resources.
Your alert("Test") simply gives to the rendering engine the needed
micro-break to accomplish the pending refresh request.
As script and rendering engine are two independent system, my
pseudo-synchronization trick with bogus var will not work:
var foo = (document.getElementById("notif").style.display = "block");
// doesn't work
foo will immediately get its undefined value ("request to redraw the
page is being sent successbully") and script will continue.
You need the full pseudo-sync in your case. Something like:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<a href="javascript:void(jsFunction())">Run Test</a>
<div id="notif" style="display: none; background-color: black;
color:white"></div>
<script>
function jsFunction() {
syncFun1();
setTimeout('syncFun2()',500);
}
function syncFun1() {
document.getElementById("notif").style.display = "block";
document.getElementById("notif").innerHTML = "test notification";
}
function syncFun2() {
var x = 0;
while (x<2099999) {
x++;
}
syncFun3();
}
function syncFun3() {
document.getElementById("notif").innerHTML = "";
document.getElementById("notif").style.display = "none";
}
</script>
</body>
</html>
