离开窗口或输入新标签时暂停动画，重新进入后继续动画？

Question

我正在制作这个漂亮的徽标动画，面临一个奇怪的问题。如果您将带有动画的选项卡保留在其中，并在几分钟后重新进入选项卡。动画（追赶）并且旋转了很多次并且速度超快。这仅在经过一段时间后退出并重新进入窗口时才会发生。

所以我认为解决方案可能是在离开标签时暂停动画，然后在重新进入标签时再次启动动画。你认为这会解决我的问题吗？如果是这样，您如何将它应用于我当前的动画？

谢谢！

JS FIDDLE

Answer 1

设置时间间隔时，它会返回一个id，可用于停止间隔循环。

var id;
$(window).focus(() => { 
    //enter tab stuff here
    id = setInterval(rotate, 7500); 
});
$(window).blur(() => {
     //leave tab stuff here
     window.clearInterval(id);
});

Answer 2

您需要将事件侦听器添加到窗口本身以获取焦点和模糊事件。

检查一下：

http://fiddle.jshell.net/6gdrQ/15