递归调用时,clearInterval不起作用

时间:2014-02-13 17:30:26

标签: javascript html

我在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');
};

1 个答案:

答案 0 :(得分:2)

您正在重复变量timeout_id用于两个不同的事物(您的间隔ID和您的超时ID),因此当您致电setTimeout时,您将覆盖您的间隔ID。变化:

var timeout_id = setInterval(...

为:

var interval_id = setInterval(...

并更新您调用clearInterval的变量:clearInterval(interval_id);