This is a re-write of an old post, written back in 2007. I recently re-used this code in another script and it's as useful today as it was then. Plus I understand it a little better now, so I thought it was time to re-discuss it.
As any client-side web developer knows, DOM scripting is inherently slow. Accessing and manipulating the DOM requires the browser's javascript engine to interface with the DOM API - which in of itself is slow: any time you have two fundamentally different components talking to one another via an interface you're going to get a bit of a bottleneck. But also, accessing and especially changing the contents of the DOM can cause reflows (the re-creation of the internal representation of the visible page within the browser) and repaints (the actual re-rendering of the visible web page to the user). And this is slow!
So what of it?
Well, here's a common scenario. Try dynamically inserting a large block of HTML into your page, then immediately accessing an element within it. Does it work? Well... sometimes it may, sometimes it may not - it can depend on the quality of the browser, how busy the CPU is, the OS, the volume of HTML inserted - a whole range of factors. From a coding standpoint (and this is what *I* find interesting!), it looks fine: on one line you insert the content, on the next you access it. What could be wrong with that? Well, this is one of those baaaad instances where you need to have an understanding of what's going on within the browser. You shouldn't, but you do.
So here's how to get around it. The following code lets you queue your DOM changes. It only proceeds to the next item in the queue when a custom assertion (e.g. "does element X exist?") is confirmed. This can ensure that regardless of browser, environment, etc. your code will execute in a sequential manner where in every step you can rely on the DOM containing the content that you expect.
The code
var $Q =
{
// each index should be an array with two indexes, both functions:
// 0: the code to execute
// 1: boolean test to determine completion
queue:
[],
run:
function()
{
if (!$Q.
queue.
length)
return;
// if this code hasn't begun being executed, start 'er up
if (!$Q.queue[0][2])
{
$Q.queue[0][0]();
$Q.queue[0][2] = window.setInterval("$Q.process()", 50);
}
},
process: function()
{
if ($Q.queue[0][1]())
{
window.clearInterval($Q.queue[0][2]);
$Q.queue.shift();
$Q.run();
}
}
}
Usage
It works very simply. Any time you have something that could take up lots of time, just add it to the queue. When you're ready to run that code, just run() it.
$Q.
push([
function() {
// do expensive stuff here...
},
function () {
// do our test here and stash it in $boolean
...
return $boolean;
}
]);
$Q.run();
Apparently Firefox 3.7 will be providing a substantially better way to attach code to key events in an extension's life (like installation, uninstallation, update etc), but in the meantime we're stuck with manually attaching our code to observers that detect those events. A little cumbersome, but workable.
Anyway, this is taken from this page on songbirdnest.com. I just made a couple of minor tweaks needed to their code: it looks like they just copied and pasted it from elsewhere, so a couple of vars - Ci and Cc - weren't defined. The following code works as a standalone component.
Read their page for some caveats and other comments.
var myUninstallObserver =
{
_uninstall :
false,
_tabs :
null,
Ci: Components.
interfaces,
Cc: Components.
classes,
observe : function(subject, topic, data) {
if (topic == "em-action-requested") {
// extension has been flagged to be uninstalled
subject.QueryInterface(Ci.nsIUpdateItem);
if (subject.id == "yourID@whatever.com") {
if (data == "item-uninstalled") {
this._uninstall = true;
} else if (data == "item-cancel-action") {
this._uninstall = false;
}
}
} else if (topic == "quit-application-granted") {
// we're shutting down, so check to see if we were flagged for uninstall - if we were, then cleanup here
if (this._uninstall) {
// code here!
}
this.unregister();
}
},
register: function() {
var observerService = Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
observerService.addObserver(this, "em-action-requested", false);
observerService.addObserver(this, "quit-application-granted", false);
},
unregister : function() {
var observerService = Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
observerService.removeObserver(this, "em-action-requested");
observerService.removeObserver(this, "quit-application-granted");
}
}
myUninstallObserver.register();
While I'm on a XUL bint... here's how to implement innerHTML in XUL. Invaluable for debugging:
Object.prototype.xulInnerHTML = function()
{
return (new XMLSerializer()).serializeToString(this);
};
Usage:
var myElement = document.getElementById("myID");
alert(myElement.xulInnerHTML);
EDIT: I've since learned that extending the built-into JS objects in this manner is NOT recommended. Instead you should implement this function as a procedural function instead. Just a heads up.
XUL is fun, but DAMN there's not enough doc out there. Coming up with this function took far longer than it should! Other functions I found on the web didn't work for my case.
var g = {};
g.removeSelectedTreeRows = function(treeID)
{
var tree = document.getElementById(treeID);
var rangeCount = tree.view.selection.getRangeCount();
var start = {};
var end = {};
for (var i=0; i<rangeCount; i++)
{
tree.view.selection.getRangeAt(i, start, end);
for (var c=end.value; c>=start.value; c--)
{
tree.view.getItemAtIndex(c).parentNode.removeChild(tree.view.getItemAtIndex(c));
}
}
};
Just came across this today. It's rather a fun hack to simulate multi-threaded behaviour with PHP - it certainly solved my problem, but as with most hacks, I find myself grimacing a lot during implementation. It's very simple: in your webpage generate HTML for any number of images that link to each script you need to run in its own thread, passing whatever info is needed via the query string.
<img height="0" width="0" border="0" src="process.php?whatever=1&something=2" />
<img height="0" width="0" border="0" src="process.php?whatever=3&something=4" />
<img height="0" width="0" border="0" src="process.php?whatever=5&something=6" />
Neat.
