Timing and Synchronization in JavaScript

Timing issues are the source of some of the most devious bugs in JavaScript applications. This article explains what causes them and shows how they can be avoided.

( Read the article )

Excellent article!

Thank you, that was a very interesting and useful article.

Good article. However forgive me for this:

I still don't know the easy answer to when an body.onload action is executed.

Is it run when the thread rendering the current document/file is done OR AFTER all dispatched children threads loading and rendering external inline scripts, images, iframes etc are done?

In other words, what is the event/trick I can use to be assured that the page is COMPLETELY loaded?

Thanks

The onload event should happen once ALL content in a document has loaded, including images, adverts, external style sheets and JavaScript, some plugin content (depending on how the plugin requests it)..

Opera 9+, Firefox and perhaps Safari support the very useful "DOMContentLoaded" event. It means you can run code when you know the document is ready for scripting but without having to wait for images.

function contentLoadedInit(){ /* initialise stuff here */ }

document.addEventListener('DOMContentLoaded', contentLoadedInit, false);

A question about this:

setTimeout(doTheWork, 0);

Is 0 for millis guaranteed to work across all browsers? I've coded a simple example where doTheWork does a busy wait. I couldn't get it to work on Firefox 2.0.0.4 on the Mac without changing millis to some number higher than 0. But of course, that's timing dependent and unreliable.

Thanks for great article! Greetings

Very good article indeed.
But I have to suggest one more thing.
As we all know developing javascript cross-browser it is a pain in the ass almost all the time and that's why I think you should have suggested that a very good way to write javascript is to use an existing library like yui or extjs and so on.... Now let's face it is very time consuming for a single developer to test javascript over all the different browsers and OSs. And you can avoid this waste of time by using the work of some other peoples(who worked as a team and have tested the scripts). Of course there is a cost for this... many of the good libraries are not free and you should think very well if you need to use one (i mean if you only want to toggle a CSS class to collapse/expand a collection of divs it's wrong to include a js script of over 300K just to do this toggle , but if you want to create a very complex web page with a lot of effects and DOM rewriting you may find these libs usefull).
I personally use extjs(www.extjs.com) and I'm satisfied.I used in the past scrpit.aculo.us and prototype.
As for tinu8805's question and other people intreseted in this I think you should have a look at this:
http://extjs.com/deploy/ext/docs/output/EventManager.jss.html

PS BTW I couldn't use the editor to put the links in my post because
JavaScript - http://dev.opera.com/forums/reply.dml
Event thread: click
Error:
name: TypeError
message: Statement on line 30: Could not convert undefined or null to object
Backtrace:
Line 30 of linked script http://dev.opera.com/js/code.js
document.forms["replyform"].message.focus();
Line 37 of linked script http://dev.opera.com/js/code.js
focusTextArea();
Line 1 of script
code("URL", "http://");
At unknown location
[statement source code not available]
I'm using Opera 9.24 and Windows Vista Ultimate

hi,

As i understand it, "A browser window has a single thread that performs parsing of HTML, dispatching of events and execution of JavaScript code." does that mean then, a page that is loading and still being parsed will pause parsing (the html) when either

i)a script block is found and executed or
ii)an event that triggers a javascript event handler is executed (eg slow connection, page gets rendered bit by bit, user clicks a button triggering an event. and the page that isn't parsed yet gets paused from doing so)




thank you,

jeff.

Hai. Supri anak nya item phl rumkit

Thanks, it's cool