Detecting and Debugging Timeouts and Intervals
When you start to cram a lot of JavaScript animations and Ajax onto a web page, it can become tricky to know all the code that's running in the background. When you start to detect some performance issues, it's equally tricky to track down what code is being executed.
Luckily, the only way to get code to run in the background with JavaScript is through the functions setTimeout and setInterval. And more luckily, we can overwrite these functions so that we can know whenever they are being called:
window.setInterval_old = window.setInterval;
window.setInterval = function(fn, time){
console.log('interval', fn.toString(), time);
return window.setInterval_old(function(){
console.log('interval executed', fn.toString());
fn();
}, time);
};
window.setTimeout_old = window.setTimeout;
window.setTimeout = function(fn, time){
console.log('timeout', fn.toString(), time);
return window.setTimeout_old(function(){
console.log('timeout executed', fn.toString());
fn();
}, time);
};
This will send output to Firebug whenever a timeout or interval is first initiated, and again when the function is actually called.
This solution is rather nice because it will let you know what 3rd party JavaScript widgets are doing in the background as well without needing to add debugging messages to them. You could overwrite nearly any method like this to get similar debugging messages as well (like document.getElementById or Array.prototype.push or practically anything).