Javascript jQuery动画功能在切换选项卡时中断

更新：我在一个文件中重现了这个错误：请参阅

执行以下操作时会出现问题：

打开。刷新网站，当您在浏览器选项卡中看到页面正在加载时，

当您在选项卡中看到微调器时

切换到浏览器中的其他选项卡。如果不发生的话。再试一次。如果按上述方法操作，您很可能会看到：

你可能会说，

这没什么大不了的，你必须非常快地让这个错误发生

。然而，想象一下，一个连接速度很慢的人，当网站加载时，他转到浏览器中的另一个选项卡，继续观看他的youtube视频。当他回来时，他只是看到页面一直在加载

---

让我们假设这是

动画

代码：

$pageloaderbar.animate({
    width: "46%"
}, {
    duration: 700,
    complete: function () {
        $scope.continue();
    }
});

当第一个

动画

完成时，它调用一个名为

$scope.continue（）的新函数。看起来是这样的：

$scope.continue = function () {
    $timeout(function () {
        $pageloaderbar.animate({
            width: "100%"
        }, {
            duration: 500,
            complete: function () {
                $scope.PageIsLoading = false;
            }
        });
    });
}

问题是，当用户在浏览器中的
$pageloaderbar.animate
和
$scope.continue
之间切换选项卡时，
$plageloaderbar.animate
函数永远不会到达
complete
函数。浏览器控制台显示以下错误（Chrome）


我的问题是，如何查看用户在网站上是否处于活动状态？或者，即使用户在
浏览器选项卡上未处于
活动状态
，我如何仍然执行该功能

因为似乎没有人有雨篷，我自己也想出了一些解决办法。但是，如果有人能解释为什么切换选项卡时
动画
会中断，我非常高兴。

解决方法非常简单，我只需添加此代码

complete: function () {
    if(document.hidden) {
        $(window).on("blur focus", function () {
            $scope.continue();
        });
    } else {
        $scope.continue();
    }
}

而不是：

complete: function () {
    $scope.continue();
}

在调用$pageloaderbar.animate之前，请尝试定义continue函数。这可能不是主要问题，但是，总是有可能因此而产生问题

你的解决方案只是一个补丁，不是真正的解决方案，看起来也不好。即使它解决了您的问题，您也必须找到某种方法来防止此错误

我强烈建议您离开jquery。这些问题通常来自jquery-角度不兼容。
在较新版本的chrome中，这与选项卡的可见性有关，因此您的功能正在中断。您可以使用visibility API来了解该选项卡是否对用户可见

请看一下我发现的这个链接：

这是由jQuery
animate
函数引起的，该函数将animate options对象传递给名为
speed
的函数。此功能检查
文档是否处于
隐藏状态
——如果该选项卡处于非活动状态，则该文档将处于隐藏状态。如果它是隐藏的（或
fx.off
设置为
true
），则所有动画持续时间都设置为
0

您可以在plunkr的jQuery文件的第
7137行中看到这一点

    if ( jQuery.fx.off || document.hidden ) {
    opt.duration = 0;

由于动画现在没有持续时间，它将变得同步，因此在调用
animate
之后出现
complete
函数是一个问题

若要修复此问题，您需要将调用上方的
complete
函数声明移动到
animate
中，您能在plunker/fiddle中重现此功能吗？很抱歉，在一个片段中，它可以正常工作。我也不能在本地开发环境中显示演示。什么是$scope，为什么在当前选项卡有焦点时不定义它？你查过了吗？$scope的生命周期中发生了什么？我们无法从您提供的内容中看到很多内容，但这不应该是这样的反应。在不同的地方记录（$scope），看看你发现了什么。你能在这里添加相关的代码吗。我认为
$scope.continue
已被覆盖。可能通过布尔值
$scope.continue=false。这就是为什么当您调用
$scope.continue（）
时，它会抛出错误
。。。不是一个函数
@trevster344
$scope
是来自
角度的
如果您感兴趣，下面是完整的代码。也许这对你有帮助：这不是一个awnser。发表评论之类的东西。我知道，你不能发表评论，因为声誉。只要记住发布awnsers，而不是提示和类似“可能是因为这个”的东西好吧，如果你仔细阅读我的问题，你会发现我实际上必须添加这些来让代码工作。它与可见性API无关。只要看看这个问题，问题就出在
jQuery
api的
animation
函数上，它在切换选项卡时会断开。你应该得到赏金，你确实仔细研究了代码并找到了答案。我查过了，是真的。当您将它放在上面时，它会工作，而且jquery会中断，因为它设置了
opt.duration=0
。冰的工作！
    if ( jQuery.fx.off || document.hidden ) {
    opt.duration = 0;