アニメーションのクロムタイムアウト問題

Question

jQueryでautplayを使って簡単なスライダを作成しました。自動再生が有効な場合は、関数を指すsetTimeoutが設定されます。この関数は、それ自体に再帰的なsetTimeoutを持ちます。

クロムを除くすべてがうまく動作します。私はタブを変更して、しばらく待って戻って、スライダーが怒っている。タイムアウトの複数のインスタンスがアクティブであるように見えますが、タイムアウトを同じ変数に指定しているので、そうではありません。

いくつかの関連するコード：

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のリターンはタイマーの内部認識に使用されるインデックス番号ではなく、実際のタイマー自体。したがって、あなたはタイマーを指しているものを上書きしているだけで、タイマーを再作成するときに実行中のタイマーは削除されません。

コンピューティングパワーを節約するために、クロムエンジンはバックグラウンドタブで実行されているほとんどのJavaScriptをフリーズし、フォーカスが戻ったときに試して「追いつく」ようです。しかし、これはどうしたらいいのか分からない。間違いなくclearTimeoutを使用するか、Timerオブジェクトを使用してこれを反復アクションとして試してみてください。

Answer 3

小さな修正が見つかりました。あなたは...あなたのコード

var timer; 

にこれを助けることができる

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

希望を、これを追加しようとすることができます。