Question

I have this function:

function _cssIsLoaded(cssStylesheet, stylePath) {
    var cssLoaded = 0;
    if (cssStylesheet.href == stylePath){
        try {
            if ( cssStylesheet.sheet && cssStylesheet.sheet.cssRules.length > 0 )
                cssLoaded = 1;
            else if ( cssStylesheet.styleSheet && cssStylesheet.styleSheet.cssText.length > 0 )
                cssLoaded = 1;
            else if ( cssStylesheet.innerHTML && cssStylesheet.innerHTML.length > 0 )
                cssLoaded = 1;
            }
            catch(ex){ }
    }
        if(cssLoaded) {
            resetPops();
            $('#video-overlay').show();
            positionElements();
            saveBizzmail();
        } else {
            setTimeout(this._cssIsLoaded(cssStylesheet), 200);
        }

It’s called by a stylesheet switching function. Occasionally, though I will get the error Uncaught RangeError: Maximum call stack size exceeded, when running the function. I presume this must be because it is looping constantly and the conditions are never being met? I’m just not sure how to debug and have a look at the conditions when it is going to mess up, since the majority of times it works fine. Can I do the equivalent of setting a breakpoint in that function but only when the callstack exceeds a certain size?

This is the function that switches stylesheets if that sheds some light:

function switchTemplate(stylePath){
var osid = $('[id^="themeStyle-"]');
var stylenum = osid[0].id.split('-')[1];
var newstylenum = (Number(stylenum) + 1).toString();
var ns = $('<link>', {
        href: stylePath,
        id: 'themeStyle-' + newstylenum,
        type: 'text/css', 
        rel: 'stylesheet'
    });
$("head").append(ns);
$('#themeStyle-' + stylenum).remove();
_cssIsLoaded(ns.get(0), stylePath);
}

Answer 1

The error Uncaught RangeError: Maximum call stack size exceeded is usually a warning about infinite, or at least excessive, recursion.

And sure enough, you have that problem. The line

setTimeout(this._cssIsLoaded(cssStylesheet), 200);

doesn’t do what you think. You want it to execute this._cssIsLoaded(cssStylesheet) after a delay of 200, but it actually executes that function immediately (causing a recursion), and then executes its return value after a delay of 200.

One easy fix would be

setTimeout(function() { this._cssIsLoaded(cssStylesheet); }, 200);

This gives setTimeout a function object (which is what it’s looking for), and then it will execute that function object after the delay, like you want it to.