Question

就我个人而言，这很奇怪..

我有一个带有一些无限动画元素的脚本。当我查看此页面时，代码工作正常。但是当我离开这个脚本并运行其他浏览器窗口时......奇怪的事情开始发生。例如，我去检查我的脸书，10秒后我用这个脚本回到我的网站（这应该一直都有效）但是，脚本突然崩溃并且整页挂起..

你可以自己检查一下，我用这个创建了一个CodePen：

CodePen Demo

去那里，打开它，在其他窗口的任何其他页面上冲浪..

问题在于使用badgeClone函数 - 我肯定知道这一点。 badge1变量采用.badge元素，克隆它并制作一些动画。但是当我再次使用我的脚本激活窗口时，在查看另一个页面之后，var badge1在控制台日志中返回.badge元素乘以次数 - 然后浏览器死亡。

具有此功能的代码片段（badgeClone）

function badgeClone() {

var badge1 = $('.badge');
var badge2 = $('.badge').clone();

var badgeWidth = badge1.width();
var badgeHeight = badge1.height();

    badge1.after(badge2);
    badge2.css({
        'line-height': '180px',
        'text-align': 'center',
        'font-size': '70px',
        'font-weight': 'bold',
        'color': '#fff',
        'opacity':'0'
    });

    badge2.animate({
        'width': badgeWidth * 2 + 'px',
        'height': badgeHeight *2 + 'px',
        'line-height': '360px',
        'font-size': '140px',
        'top': '-150px',
        'right': '-100px'
        },
        500, "linear", function() {
            if(count >= 9) {
                count = 1
            } else {
                count++
            }

            badge2.text(count);

            badge2.delay(300).animate({
                'width': badgeWidth + 'px',
                'height': badgeHeight + 'px',
                'line-height': '180px',
                'font-size': '70px',
                'top': '-60px',
                'right': '-40px',
                'opacity': '1'},
                500, "linear", function(){
                    badge1.fadeOut(600, function(){
                        console.log(badge2);
                        $(this).remove();
                        console.log(badge1);
                    });
                });
        });

}

我听说过，这可能是因为新的浏览器功能。当窗口处于非活动状态时，当我在窗口处于非活动状态时，它们会像我的脚本上的自动队列一样，当我再次激活窗口时，所有队列中的所有东西都会一次性爆炸。

这可能是真的，但问题是......如何阻止它？

再一次 - 提前感谢：）

当查看其他页面时，页面因动画而挂起

0 个答案: