時間間隔，在其他時間停止。當返回播放所有的時間間隔之後

Question

位奇怪的標題，但在這裏我得到了什麼。

我發現這個問題問了幾次，但awnsers不似乎正常工作對我來說

我得到的是，反彈向上和向下引起你的注意頁腳，當你在它懸停它將展開一個過濾器。

現在它在窗口中完美地工作，但是當我移動到其他選項卡並返回到該網站時，它會在所有彈跳之後發揮彼此作用。

我讀過一篇文章，指出在另一個選項卡中減少間隔時間以提高CPU速度。

我現在只有在窗口設置爲焦點時纔會播放定時器，並且在設置爲模糊時禁用該定時器。 但是這並不是100％的時間。

var $bounceInter = 6000; 

function mycode() { 
    if($bounceOn == true) { 
      $("#footer").animate({bottom:"+=20px"},150, 'swing').animate({bottom:"-=20px"},150, 'swing').animate({bottom:"+=10px"},100, 'swing').animate({bottom:"-=10px"},100,"swing",function(){$("#footer").data("bouncing", false);}); 
    } 
    clearTimeout($bounceTimer); 
    $bounceTimer = setTimeout(mycode, $bounceInter); // repeat myself 
} 


$(window).focus(function() { 
    $bounceTimer = setTimeout(mycode, $bounceInter); 
}); 

$(window).blur(function() { 
    clearTimeout($bounceTimer); 
}); 

var $bounceTimer = setTimeout(mycode, $bounceInter); 

任何其他可能的修復？

我已經從另一個人那裏得到反彈代碼，也許問題出在那裏？

Answer 1

將requestAnimationFrame方法合併到您的代碼中。由於你的代碼不完整（$bounceOn的作用是什麼？可能設置在懸停或某物上），我將根據你的函數名稱突出顯示通用步驟。我將刪除$前綴，因爲它用於按慣例標記jQuery對象。

爲方便起見，我們使用規範化API，在必要時使用本機（前綴爲）​​方法和填充。 polyfill由Erik Moller創建，可以找到on his blog。

// Minimum delay between each call 
var bounceInter = 6000 
    , raf 
    , bounceTimer; 

function nextAnimationStep() { 
    raf = requestAnimationFrame(function() { 
     // Code here (eg animation) 
     bounceTimer = setTimeout(nextAnimationStep, bounceInter); 
    }); 
} 

// Initial step 
nextAnimationStep(); 

// To cancel animation (to restart, just call `nextAnimationStep();`): 
cancelAnimationFrame(raf); 
clearTimeout(bounceTimer); 

以下是您的動畫，填寫的內容爲：http://jsfiddle.net/exPeP/1。