递归clearInterval不起作用

时间:2014-02-13 16:23:50

标签: javascript html html5

我在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 :(得分:0)

你可能不止一次启动计时器吗?你能尝试一下:

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