clearInterval이 반복적으로 호출 될 때 작동하지 않습니다.

Question

javaScript에서 다음 함수가 있습니다. 이 함수는 스타일 시트를 다시로드해야 할 필요가있을 때 호출됩니다. 예를 들어 사용자 언어가 변경되면 텍스트가 더 이상 버튼에 맞지 않습니다. 문제는 setInterval 부분에 문제가 있다는 것입니다. 그것은 끝없이 반복됩니다. 크롬 디버거에서 clearInterval 부분에 도달했음을 알 수 있지만 명확하지 않습니다. 이 함수 -retryStyle은 한 번만 호출됩니다. 아무도 도와 줄 수 있습니까? 감사합니다. 당신이 setTimeout를 호출 할 때 당신이 당신의 간격 ID를 덮어 쓰는 것, 그래서

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

당신은 두 개의 다른 것들에 대한 변수 timeout_id (당신의 간격 ID와 시간 제한 ID)를 재사용하고 있습니다. 변경 : 당신은뿐만 아니라 위해 clearInterval을 호출 변수

var interval_id = setInterval(... 

및 업데이트 : clearInterval(interval_id);