recursive clearInterval does not work

Question

I have the following function in javaScript. This function is called when i detect a need to re-load the stylesheet. for example, doe to user language change, so the text won't fit the buttons anymore. The problem is, it gets stuck in the setInterval part. looping into it endlessly. I can see in the chrome debugger that it does get to the clearInterval part - but it wont clear. This function - resetStyle - is only called once.

 p.resetStyle = function() {
    var that = this;
    var oldStylesheet_href = $('#mainStylesheet').attr("href");
    var i = oldStylesheet_href.indexOf('lang');
    var lastLanguege = oldStylesheet_href.substring(i + 5, i + 7);
    var prefix, sufix;

    if (lastLanguege === createjs.mainManager.LangString) {
        return;
    }

    prefix = oldStylesheet_href.substring(0, i - 1);
    sufix = '&' + oldStylesheet_href.substring(i + 7, oldStylesheet_href.length);


    var head = document.getElementsByTagName('head')[0]; // reference to document.head for appending/ removing link nodes
    var link = document.createElement('link');           // create the link node
    link.setAttribute('id', 'newStylesheet');
    link.setAttribute('href', prefix + '&lang=' + createjs.mainManager.LangString + sufix);
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');

    var sheet, cssRules;
    // get the correct properties to check for depending on the browser
    if ('sheet' in link) {
        sheet = 'sheet';
        cssRules = 'cssRules';
    }
    else {
        sheet = 'styleSheet';
        cssRules = 'rules';
    }

    var timeout_id = setInterval(function() {                     // start checking whether the style sheet has successfully loaded
        try {
            if (link[sheet] && link[sheet][cssRules].length) { // SUCCESS! our style sheet has loaded
                clearInterval(timeout_id);                      // clear the counters
                clearTimeout(timeout_id);
                that.onStyleReset();
            }
        } catch (e) {
        } finally {
        }
    }, 10), // how often to check if the stylesheet is loaded
            timeout_id = setTimeout(function() {       // start counting down till fail
        clearInterval(timeout_id);             // clear the counters
        clearTimeout(timeout_id);
        head.removeChild(link);              // since the style sheet didn't load, remove the link node from the DOM
        that.onStyleReset();
    }, 15000);

    $('head').append(link);
    $('#mainStylesheet').remove();
    link.setAttribute('id', 'mainStylesheet');
};

Answer 1

Is it possible you are starting the timer more than once? Could you try:

var timeout_id = (function() {
    if (timeout_id) {
        // a timer is already running!
        clearInterval(timeout_id);     // stop it - or you could just return and not create a new one
    }
    return setInterval(function() {
            if (link[sheet] && link[sheet][cssRules].length) {
                clearInterval(timeout_id);                 
                that.onStyleReset();
            }
        }, 10)
    })();