I am writing an internal structure that cannot have any dependencies (e.g. jQuery, etc.) and I am trying to implement my own DOM functions in a ready-made style. It seems that when the callback is in the finished queue (the callback array to complete in the DOM is ready), if an exception is thrown inside this function, execution stops and proceeds to the next callback (which I want), but Firefox will not report an error (log in to the console, activate onerror, whatever). Am I doing something wrong?
I implemented this using a combination of the Dean Edwards template ( http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/ ) and the jQuery source. I do not want to implement in the same way as jQuery, because if one callback fails, subsequent callbacks will not be executed.
var readyCallbacks = [];
(function () {
var currentHandler,
fireReady,
removeEvents,
loopCallbacks = function () {
for (var i = 0, len = readyCallbacks.length; i < len; i += 1) {
currentHandler = readyCallbacks[i];
fireReady();
}
};
if (document.addEventListener) {
document.addEventListener('readyEvents', function () { currentHandler(); }, false);
fireReady = function () {
var readyEvent = document.createEvent('UIEvents');
readyEvent.initEvent('readyEvents', false, false);
document.dispatchEvent(readyEvent);
};
removeEvents = function () {
window.removeEventListener('load', loopCallbacks, false);
loopCallbacks();
};
document.addEventListener('DOMContentLoaded', removeEvents, false);
window.addEventListener('load', loopCallbacks, false);
} else {
document.documentElement.readyEvents = 0;
document.documentElement.attachEvent('onpropertychange', function (e) {
if (e.propertyName === 'readyEvents')
currentHandler();
});
fireReady = function () {
document.documentElement.readyEvents += 1;
};
removeEvents = function () {
window.detachEvent('onload', loopCallbacks);
loopCallbacks();
};
document.attachEvent('onreadystatechange', removeEvents);
window.attachEvent('onload', loopCallbacks);
}
})();
Client.ready = function (callback) {
readyCallbacks.push(callback);
};
Here is my test implementation. The console is written and the DOM element has been processed. In IE, error c is UNDEFINED_VARIABLE++;displayed in the console, but not in Firefox.
<!DOCTYPE html>
<html>
<head>
<script src="Client.js"></script>
<script>
Client.ready(function () {
console.log('logging before error');
UNDEFINED_VARIABLE++;
console.log('logging after error, not logged in Firefox');
});
Client.ready(function () {
console.log('before DOM access');
document.getElementById('cheese').innerHTML = 'cheese';
console.log('after DOM access');
});
</script>
</head>
<body>
<div id="cheese">test</div>
</body>
</html>