서버 API 호출에 ClearInterval이 작동하지 않습니다 (단, 경우에 한함)

Question

게시 된 새 콘텐츠가 있는지 4 초마다 데이터베이스에 쿼리해야하는이 함수가 있습니다. 그런 다음 서버에서 되돌아온 동적 HTML로 피드를 새로 고치고 새로 고칩니다. 이 모든 것이 훌륭하게 작동합니다.

내 문제는 html의 일부로 콘텐츠의 일부를 밀어 넣을 수있는 옵션 트레이가 있고 그 콘텐츠와 관련된 다른 옵션을 제공하고, 삭제하고, 복사하고, 댓글을 달아주는 것입니다. 글쎄 트레이들이 튀어 나올 때 인터벌 타이머를 지우고 피드에서 html을 리프레시하지 않도록 (트레이가 사라지게) 싶습니다.

다른 문제는 사용자가 동시에 여러 트레이를 가질 수 있다는 것입니다 그래서 모두를 처리하기 위해이 기능을 함께했다 :

function setTimers(status) 
{ 
    var timerGetContent = null; 
    if(status == "login") 
    { 
     tray_count = 0; 
     timerGetContent = null; 
     timerGetContent = setInterval(getContent,4000); 
     alert("inside login"); 
    } 
    else if(status == "negitive") 
    { 
     tray_count--; 
     if(tray_count == 0 && timerGetContent == null) 
     { 
      timerGetContent = setInterval(getRecentContent,4000); 
      alert("inside negitive"); 
     } 
    } 
    else if(status == "positive") 
    { 
     tray_count++; 
     clearInterval(timerGetContent); 
     timerGetContent = null; 
     alert("inside positive") 
    } 

} 

을 사용자가 튀어 버튼을 누르면 그래서 때 트레이 setTimer을 호출하고 다른 작업을 수행하기 전에 양수를 전달한 다음 버튼을 눌러 트레이를 닫으면 setTimer이 부르고 무시됩니다. 나는 호출이 작동하고 그 파라미터가 올바른 매개 변수를 전달한다는 것을 알고 있으며, 무엇이 눌려 졌는가에 따라 함수의 오른쪽 부분으로 들어가는 것을 알지만, 간격이 지워지지 않고 어떤 일이 계속 발생하더라도 시간은 계속됩니다. 나는한다. 이 작업을 몇 시간 동안하고 완전히 어려움을 겪고 있습니다.

편집 : 나는 외부 변수 인 timerGetContent을 전역 변수로 사용하려고했습니다. 이것은 동일한 행동 문제가있었습니다.

Edit2가 다음 setTimers 함수를 호출 기능 :이 기능은 팝업에있는 동안

function slide_out(event) 
{ 
    clicked_element = document.getElementById(event.srcElement.id); 
    var re_clicked = new RegExp(clicked_element.className, "g"); 
    if(clicked_element.className == "options-bar slide-out") 
    { 
     BACKGROUND.setTimers("positive"); 
     clicked_element.className = clicked_element.className.replace(re_clicked, ''); 
     clicked_element.className += "options-bar slide-out open"; 
    } 
    else 
    { 
     clicked_element.className = clicked_element.className.replace(re_clicked, ''); 
     clicked_element.className += "options-bar slide-out"; 
     BACKGROUND.setTimers("negitive"); 
    } 

또 한가지는 setTimers 기능은 확장의 배경 파일에 있습니다.

Answer 1

Femi가 이전에 제안한 것처럼 주요 문제는 범위 지정이었습니다. 은이어야하며 var timerGetContent = null;은 함수 선언 외부로 이동해야합니다. 첫 번째 조건 인 status == "login"에 논리 오류가 있습니다. timerGetContent intervalID를 먼저 지우지 않고 null로 설정했습니다.

따라서 setTimers("positive");을 호출하지 않고 setTimers("negitive");을 호출 한 후 setTimers("login");을 호출하면 처음으로 간격을 지우는 것이므로 적어도 하나의 간격을 유지해야합니다.

var tray_count = 0; 
var timerGetContent = null; 
function setTimers(status) { 
    if(status == "login") { 
     tray_count = 0; 
     // Setting the intervalID to null will NOT clear the interval 
     // If we do not clear the interval, calling setTimers('login') 
     // will create a new interval and make previous interval 
     // "unclearable" every time it is called 
     clearInterval(timerGetContent); 
     timerGetContent = null; 
     timerGetContent = setInterval(function() { 
      console.log('login intervalling') 
      },400); 

    } else if(status == "negitive") { 
     tray_count--; 
     if(tray_count == 0 && timerGetContent == null) { 
      timerGetContent = setInterval(function() { 
       console.log('negitive intervalling') 
      },400); 
      alert("inside negitive"); 
     } 
    } else if(status == "positive") { 
     tray_count++; 
     clearInterval(timerGetContent); 
     // calling clearInterval does not actually unset the intervalID variable 
     // so we need to set it to null manually 
     timerGetContent = null; 
     timerGetBlasts = null; 
    } 

} 

업데이트 2014년 7월 14일 : 고정 당신이 전역을 가지고 제안

Answer 2

var timerGetContent = null;을 함수 외부로 이동하여 setTimers에 대한 호출간에 지속되도록 시도하십시오. 바로 지금 함수에 로컬입니다.

Answer 3

--cbarrick 서식 오타

나는 당신의 기능 테스트를위한 CONSOLE.LOG 문 통화를 대체 새 타이머를 만들 때마다 그 타이머를 밀어 넣거나 그 반대로 밀어 넣을 수 있도록 타이머 ID의 배열/객체.

필자의 의견 :

timers = {}; 

function slide_out(event) { 
    clicked_element = document.getElementById(event.srcElement.id); 

    var re_clicked = new RegExp(clicked_element.className, "g"); 
    if (clicked_element.className == "options-bar slide-out") { 
    BACKGROUND.setTimers("positive", clicked_element.id); 
    clicked_element.className = clicked_element.className.replace(re_clicked, ''); 
    clicked_element.className += "options-bar slide-out open"; 

    } else { 
     clicked_element.className = clicked_element.className.replace(re_clicked, ''); 
     clicked_element.className += "options-bar slide-out"; 
     BACKGROUND.setTimers("negitive", clicked_element.id); 
    } 

function setTimers(status, elementId) { 
    var timerGetContent = null; 
    if (status == "login") { 
    tray_count = 0; 
    timerGetContent = null; 
    timerGetContent = setInterval(getContent, 4000); 
    timers[elementId] = timerGetContent; 
    alert("inside login"); 
    } else if (status == "negitive") { 
     tray_count--; 
     if (tray_count == 0 && timers[elementId] == undefined) { 
     timerGetContent = setInterval(getRecentContent, 4000); 
     timers[elementId] = timerGetContent; 
     alert("inside negitive"); 
     } 
    } else if (status == "positive") { 
     tray_count++; 
     clearInterval(timers[elementId]); 
     delete timers[elementId]; 
     timerGetContent = null; 
     alert("inside positive") 
    } 
} 

내가 들여 쓰기

건배 빠른 응답