当用户在浏览器中更改标签时，是否会在Javascript中触发事件

Question

让我先从问题开始：如果用户更改浏览器标签，则使用setTimeout（）时Chrome会出现异常，Javascript的执行会暂停/暂停。在用户更改后，Chrome想要赶上，因此动画不符合时间限制并且动画失去控制。

如果用户在一段时间后回来，我正试图阻止Chrome冲动动画。我在另一个问题中发现jQuery提供了一个.blur＆amp; .focus事件，但似乎也不起作用：

$(window).blur(function() {
  clearTimeout(timer) 
})

有没有办法在用户更改标签的确切时刻停止动画，或者在用户更改标签后没有被触发的事件？

Answer 1

在大多数现代浏览器中，当选项卡未处于焦点时，超时会经常停止触发，这就是您看到动画暂停/抖动的原因。这是故意的。

有一个great mozilla article解释了如何编写一些逻辑，当选项卡不在焦点时处理动画。它甚至包括一个名为animLoop.js的小型跨浏览器库来帮助您。这些示例也适用于Chrome。

Answer 2

有一个Page Visibility API。其主要目的是在用户显示/隐藏选项卡或窗口时通知页面。该API尚未完成，但适用于多种浏览器，包括Chrome。您可以在Nicholas Zakas' blog中了解有关它的更多信息。

Answer 3

我不知道如何用jQuery做到这一点，但在纯粹的js你可以这样做：

<script>
function onBlur() {
    clearTimeout(timer);
};
if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusout = onBlur;
} else {
    window.onblur = onBlur;
}
</script>

确保变量timer在可见范围内。