Javascript/jQuery에서 ClearInterval을 사용할 수 없습니다.

Question

jQuery 책을 읽고 예제를 작성하려고합니다. 이 예제에서는 번개가 화면에서 깜박이고 그 부분은 잘 동작합니다. 문제는 탭을 전환 한 다음 다시 전환하면 번개가 빠르게 연속해서 깜박이기 시작한다는 것입니다. 문제는 window.onblur 및 window.onfocus 이벤트를 사용하여 수정해야하지만 작동하지 않습니다. 아무도 내가 잘못하고있는 것을 볼 수 있습니까?

아이디가 다른 숨겨진 번개 사진이 세 개 있으며, 각 사진이 깜박이는 세 가지 다른 기능이 있습니다. goLightning()은 각 함수의 간격을 설정하고 stopLightning()은 해당 간격을 지워야합니다. 그 부분은 제가 아는 모든 것에 효과가없는 것 같습니다. 코드는 다음과 같습니다.

$(document).ready(function(){ 
    goLightning(); 
    window.onblur = stopLightning; 
    window.onfocus = goLightning; 
    var int1; var int2; var int3; 

    // this function sets the lightning interval 
    function goLightning() { 
     int1 = setInterval(function() { lightning_one(); },4000); 
     int2 = setInterval(function() { lightning_two(); },5000); 
     int3 = setInterval(function() { lightning_three(); },7000); 
    } 

    // this function clears the lightning when the window isn't focused 
    function stopLightning() { 
     window.clearInterval(int1); 
     window.clearInterval(int2); 
     window.clearInterval(int3); 
    } 

    // these three functions make the lightning flash and seem to be working fine 
    function lightning_one() { 
      $("#container #lightning1").fadeIn(250).fadeOut(250); 
    } 
    function lightning_two() { 
     $("#container #lightning2").fadeIn(250).fadeOut(250); 
    } 
    function lightning_three() { 
     $("#container #lightning3").fadeIn(250).fadeOut(250); 
    } 
}); 

이것이 작동하지 않는 이유는 알 수 없습니다. stopLightning()이 간격을 지우지 않았거나 window.onblur이 작동하지 않는 것 같습니다. 어쨌든, 어떤 피드백이 도움이 될 것입니다. 감사!

Answer 1

새 간격을 설정하기 전에 goLightning()에 처음부터 stopLightning()을 추가하십시오.

Answer 2

재 배열 다음 줄 :

goLightning(); 
window.onblur = stopLightning; 
window.onfocus = goLightning; 
var int1; var int2; var int3; 

이 대신에 :

이

var int1, int2, int3, w = window; 
w.onblur = stopLightning; 
w.onfocus = goLightning; 
goLightning(); 

다음, 당신에 대한 참조를 사용할 수 있도록하기 위해 stopLightning() 함수에서 변수 w 대신 window의를 사용 적절한 창문. 또한 @Kolink가 언급했듯이 goLightning() 함수 시작 부분에 stopLightning()에 전화를 걸어도 포커스 이벤트가 두 번 이상 발생하는 경우 여러 인스턴스가 실행되지 않도록해야합니다.

EDIT 이벤트를 설정 한 후 goLightning()으로 전화를 옮겼습니다.하지만 그 방법이 더 좋을 것이라고 생각합니까?