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

Question

我正在研究这个漂亮的徽标动画，并且面临一个奇怪的问题。如果您将其放在其中的动画中，并在几分钟后重新输入选项卡。动画（赶上）并旋转了很多次，超级速度。这只有在LIL时间后退出并重新输入窗口时才会发生。

所以我认为解决方案可能是在离开标签时暂停动画，然后在重新输入选项卡时重新开始。您认为这可以解决我的问题吗？如果是这样，您将如何将其应用于我当前的动画？

谢谢！

Js小提琴

Answer 1

设置时间间隔时，它会返回一个ID，该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