애니메이션에서 Chrome 시간 초과 문제가 발생했습니다.

Question

jplay에서 autplay로 간단한 Slider를 작성했습니다. 자동 실행이 활성화 된 경우 함수를 가리키는 setTimeout이 설정됩니다. 이 함수는 자체적으로 재귀 적 setTimeout을가집니다.

Chrome을 제외한 모든 기능이 잘 작동합니다. 탭을 변경 한 후 잠시 기다렸다가 돌아 오면 슬라이더가 놀란다. 타임 아웃의 인스턴스가 여러 개있는 것처럼 보입니다 ...하지만 같은 변수에 타임 아웃을 지정 했으므로 그럴 수 없습니다.

일부 관련 코드 :

는

var timer; 

    function autoplay() { 
    currentPosition++; 
    if(currentPosition == numberOfSlides) { 
     // last slide 
     currentPosition = 0; 
    } 
    manageNavigation(currentPosition); 

    // Hide/show controls 
    manageControls(currentPosition); 

    // animate the slides 
    slideshowAnimate(); 

    // set timer 
    if(autoplay_enable) { 
     //clearTimeout(timer); 
     timer = setTimeout(function() { autoplay() }, interval*1000)  
    } 
    } 
    function setTimer() { 
    if(autoplay_enable) { 
     timer = setTimeout(function() { autoplay() }, interval*1000)  
    } 
    } 

    setTimer(); 

Answer 1

아니, timer의 값을 재설정하는 것은 현재의 타이머를 취소하지 않습니다. 이를 위해서는 clearTimeout해야합니다. 모든 타이머 보류는 타이머에 대한 숫자 참조이며 클로저 또는 그 자연의 것이 아닙니다.

당신이 setTimer()을 시작하기에 좋은 조건을 가지고 가정, 코드 더 다음과 같아야합니다

이

var timer; 

function autoplay() { 
    clearTimeout(timer); //! New code. 
    currentPosition++; 
    if(currentPosition == numberOfSlides) { 
     // last slide 
     currentPosition = 0; 
    } 
    manageNavigation(currentPosition); 

    // Hide/show controls 
    manageControls(currentPosition); 

    // animate the slides 
    slideshowAnimate(); 

    // set timer 
    setTimer(); //! Switched from having multiple startup locations. 
} 
function setTimer() { 
    if(autoplay_enable) { 
     timer = setTimeout(autoplay, interval*1000); //! Removed unnecessary closure. 
    } 
} 

setTimer(); 

Answer 2

에서는 setTimeout의 반환이 타이머의 내부 인식에 사용되는 인덱스 번호가 아닌 것입니다 실제 타이머 자체. 따라서 타이머를 가리키고있는 것을 덮어 쓰면서 타이머를 다시 만들 때 실행중인 타이머를 제거하지 않습니다.

컴퓨팅 성능을 유지하기 위해 Chrome 엔진은 백그라운드 탭에서 실행되는 대부분의 자바 스크립트를 정지시키고 다시 포커스를 맞출 때 "따라 잡으려고"시도합니다. 이 문제를 해결할 수있는 방법이 무엇인지 모릅니다. 분명히 clearTimeout을 사용하거나 Timer 객체를 사용하여 반복적 인 동작으로 이것을 잡아내는 것이 좋습니다.

Answer 3

작은 수정을 시도했습니다. 당신은 ... 당신의 코드

var timer; 

이 도울 수

$(window).blur(function() { 
    clearTimeout(timer); 
}).focus(function() { 
    timer= setInterval(autoplay, interval*1000); 
}); 

희망이를 추가 할 수 있습니다.