This inquiry might lean more towards a general browser/javascript discussion rather than a focused prototype question, but I believe this community possesses a deep understanding of javascript and browsers. With that said, here is my query:
If the following code is executed:
HTML:
Javascript:
$('area').insert({bottom: "<div id="inserted"></div>"});
var count = 0;
var f = function() {
if ($('inserted') == null) {
console.log("not there");
count++;
if (count > 50) {
$('area'.insert({bottom: "<div id="inserted"></div>"});
count = 0;
}
f.defer();
} else {
console.log("there");
}
};
f();
Outcome:
In most cases, it simply displays:
there
However, at times, it exhibits this behavior:
not there
not there
not there
there
I suspect this inconsistency may be due to the queuing of the insert operation, with the browser inserting nodes into the DOM during its subsequent event loop. Considering Webkit's single-threaded nature, it seems plausible for the "not there" result to occasionally shift to "there". How do Firefox and IE compare in terms of being single-threaded? And how does Chrome handle this scenario?
Occasionally, I observe the following alarming pattern:
not there
not there
... 50 times
not there
there
This sporadic sequence occurs on Webkit (Mac OS) and iPhone Webkit, and can be reliably reproduced. It puzzles me because when reviewing other individuals' code, they seem to overlook waiting for DOM elements to render when inserting HTML text into a DOM element.
Your insights and recommendations would be greatly appreciated.
Kiran