递归clearInterval不起作用

Question

我在javaScript中具有以下功能。 当我检测到需要重新加载样式表时，将调用此函数。 例如，doe更改了用户语言，因此文本不再适合按钮。 问题是，它卡在setInterval部分中。 不断地循环进入它。 我可以在chrome调试器中看到它确实到达了clearInterval部分-但不会清除。 此函数-resetStyle-仅被调用一次。

 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

您是否可能多次启动计时器？ 您可以尝试：

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)
    })();