As per discussion in the thread
http://groups.google.com/group/comp....7e4f3a30f4d1c3
I'm proposing to add new FAQ entry:
----------------------------------------------------------------
I'm changing my page but nothing is changing on the screen. Why?
----------------------------------------------------------------
You may be experiencing the repaint delay problem. All existing
browsers do not update graphics context (screen content) until after
the current execution is finished. Until it's finished the DOM changes
are being accumulated but not reflected on the screen. The most
commonly used way to overcome this problem is by using micro-breaks
over setTimeout.
/* repaint delay vulnerable coding : */
function someLongProcess () {
document.getEle mentById('Loadi ngMessage').sty le.visibility =
'visible';
doLongProcess() ;
document.getEle mentById('Loadi ngMessage').sty le.visibility =
'hidden';
}
In the sample above nothing will work as the coder would expect.
LoadingMessage DOM element will remain invisible on the screen until
after someLongProcess function is fully executed. Only after that all
graphics context changes will be applied in one bulk, so
LoadingMessage element will be changed to visible and to hidden right
after that, so for the viewer it will not appear at all.
/* repaint delay aware coding : */
function someLongProcess () {
document.getEle mentById('Loadi ngMessage').sty le.visibility =
'visible';
window.setTimeo ut(doLongProces s, 60);
}
function doLongProcess() {
// long process;
document.getEle mentById('Loadi ngMessage').sty le.visibility =
'hidden';
}
----------------------------------------------------------------
Some notes to the FAQ text:
1) I'm struggling to find the right term for "the current execution is
finished". It is not really finished - that can be a few processes
over setInterval for instance. "current thread" or "current flaw" is
bad IMHO as well as because of terminology confusion (JavaScript
doesn't implement threaded model). Ideas?
2) This issue is really a "bug qualifying feature" - it forces to use
modularity based not on the programming logic but on graphics engine
weakness. So I think to file a feature request to Bugzilla based on
this FAQ. It doesn't matter that "everyone does the same" - some day a
UA should appear that does it not.
3) If anyone has timÕ it would be interesting to check if the "soft
break" would works, so something like:
function someLongProcess () {
window.setTimeo ut("document.ge tElementById('L oadingMessage') .style.visibili ty
= 'visible';", 60);
doLongProcess() ;
document.getEle mentById('Loadi ngMessage').sty le.visibility =
'hidden';
}
I can tell pretty sure that it will fail for synchronious XHR calls
where the suggested "hard break" is the only option. But maybe for
some other cases like the one in the thread I linked?
P.S. Yeah, I know... Started laud on rounding FAQ and ended up will
all another unrelated FAQ. The problem with the rounding FAQ is that
it is now in E=mc^2 state. I don't mean it's so genius :-) I mean that
while the suggestion itself is short and simple, the explanation and
proof of "why?" requires a whole big article I have to write first.
But this FAQ is still in my schedule.
