时间间隔，在其他时间停止。当返回播放所有的时间间隔之后

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。