Question

有点奇怪的标题，但在这里我得到了。

我发现这个问题曾经问过几次，但是这些问题似乎对我不起作用

我得到的是一个上下跳动以吸引你的注意力的页脚，当你将鼠标悬停在它上面时，它会展开显示一个过滤器。

现在它在窗口中完美运行，但是当我移动到另一个标签并返回到该网站时，它将在彼此之后播放所有弹跳。

我已经阅读了一篇文章，在另一个标签页面中，Chrome会减慢间隔，以提高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，该API使用本机（前缀）requestAnimationFrame方法和必要时的polyfill。 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。

间隔，在othertab停止。当返回播放所有间隔后

1 个答案: