JQuery动画在切换程序/选项卡后闪烁

好的，我正在创建一个简单的计数器，从一个设定的数字开始计数，我知道如果计数器达到9999，会有一些限制，但我并不真正关心这些，因为用户不会在页面上停留那么长时间

我真正关心的是一个忽隐忽现的问题，如果你在操作系统上切换标签或切换程序并返回浏览器，数字就会忽隐忽现

例如，只要试一下下面的提琴，然后对另一个程序使用alt+tab键10秒钟，然后返回，你就会看到闪烁的声音

提前感谢任何能告诉我是什么导致了这一切的人！正如您从代码中看到的，我已经使用了一个WebWorker作为计时器，因为我了解到在这个WebWorker中使用一个设置的时间间隔甚至可以在切换选项卡时作为后台任务工作，但仍然存在问题

守则：

var currentDigit = 5;


// makeWebWorker is a little wrapper for generating a web worker to handle timing and destroying it.
function makeWebWorker(script) {
    var URL = window.URL || window.webkitURL;
        Blob = window.Blob,
        Worker = window.Worker;

    if (!URL || !Blob || !Worker || !script) {
        return null;
    }

    var blob = new Blob([script]),
        worker = new Worker(URL.createObjectURL(blob));

    return worker;
}

function setupCountTimer() {
    var timerCode = "self.addEventListener('message', function(e) { var data = e.data;var date = new Date();console.log(date);if (data.cmd=='start') {postMessage(data.msg);setInterval(function(){postMessage('message');},850)}} ,false);";

    // CREATE TIMER (To run within web worker)
    if(!_bgTimer) {
        var _bgTimer = makeWebWorker(timerCode);

        _bgTimer.postMessage({'cmd':'start'});

        _bgTimer.onmessage = function(e) {
            count();
        };
    }
}

function incrementNumber(digit, value) {
    var el = $('.numbers p:nth-child(' + digit + ')'), // Element
        newValue = value + 1;

    el.animate({
        marginTop: "-150px"
    }, 200, "swing", function() {
        el.text(newValue);
        el.animate({
            marginTop: "150px"
        }, 0, function() {
            el.animate({
                marginTop: "0px"
            }, 200, "swing");
        });
    });
}

function checkThirdNumber() {
    var nextDigit = currentDigit - 2,
        nextEl = $('.numbers p:nth-child(' + nextDigit + ')'), // Element
        nextValue = parseInt(nextEl.text());
    if (nextValue < 9) {
        currentDigit = nextDigit;
        incrementNumber(currentDigit, nextValue);
        currentDigit = nextDigit + 2;
    } else {
        incrementNumber(nextDigit, - 1);
        checkFourthNumber();
    }
}

function checkFourthNumber() {
    var nextDigit = currentDigit - 2,
        nextEl = $('.numbers p:nth-child(' + nextDigit + ')'), // Element
        nextValue = parseInt(nextEl.text());
    if (nextValue < 9) {
        currentDigit = nextDigit;
        incrementNumber(currentDigit, nextValue);
        currentDigit = nextDigit + 2;
    } else {
        incrementNumber(nextDigit, - 1);
    }
}

function checkNextNumber() {
    var nextDigit = currentDigit - 1,
        nextEl = $('.numbers p:nth-child(' + nextDigit + ')'), // Element
        nextValue = parseInt(nextEl.text());
    if (nextValue < 9) {
        currentDigit = nextDigit;
        incrementNumber(currentDigit, nextValue);
        currentDigit = nextDigit + 1;
    } else {
        incrementNumber(nextDigit, - 1);
        checkThirdNumber();
    }
}

function count() {
    var el = $('.numbers p:nth-child(' + currentDigit + ')'), // Element
        currentValue = parseInt(el.text()); // Element value
    if (currentValue < 9) {
        incrementNumber(currentDigit, currentValue);
    } else if (currentDigit >= 2 && currentDigit < 6) {
        incrementNumber(currentDigit, - 1);
        checkNextNumber();
    } else {
        currentDigit = 0;
    }
}
setupCountTimer();

var currentDigit=5；
//makeWebWorker是一个小包装器，用于生成web worker来处理计时并销毁它。
函数makeWebWorker（脚本）{
var URL=window.URL | | window.webkitURL；
Blob=window.Blob，
Worker=window.Worker；
如果（！URL | | |！Blob | |！Worker | |！脚本）{
返回null；
}
var blob=新blob（[script]），
worker=新的worker（URL.createObjectURL（blob））；
返乡工人；
}
函数setupCountTimer（）{
var timerCode=“self.addEventListener（'message'，函数（e）{var data=e.data；var date=new date（）；console.log（date）；if（data.cmd='start'）{postMessage（data.msg）；setInterval（函数（）{postMessage（'message'）；}，850}}，false）；”；
//创建计时器（在web worker中运行）
如果（！\u bgTimer）{
var _bgTimer=makeWebWorker（timerCode）；
_bgTimer.postMessage（{'cmd'：'start'}）；
_bgTimer.onmessage=函数（e）{
计数（）；
};
}
}
函数增量编号（数字、值）{
var el=$（'.numbers p:n子元素（'+digit+'），//元素
newValue=value+1；
动画片({
marginTop:“-150px”
}，200，“swing”，函数（）{
el.文本（新值）；
动画片({
玛金托普：“150像素”
}，0，函数（）{
动画片({
marginTop：“0px”
}，200，“摇摆”）；
});
});
}
函数checkThirdNumber（）{
var nextDigit=当前数字-2，
nextEl=$（'.numbers p:n子元素（'+nextDigit+'），//元素
nextValue=parseInt（nextEl.text（））；
如果（下一个值<9）{
currentDigit=nextDigit；
递增数字（当前数字，下一个值）；
currentDigit=nextDigit+2；
}否则{
递增编号（nextDigit，-1）；
checkFourthNumber（）；
}
}
函数checkFourthNumber（）{
var nextDigit=当前数字-2，
nextEl=$（'.numbers p:n子元素（'+nextDigit+'），//元素
nextValue=parseInt（nextEl.text（））；
如果（下一个值<9）{
currentDigit=nextDigit；
递增数字（当前数字，下一个值）；
currentDigit=nextDigit+2；
}否则{
递增编号（nextDigit，-1）；
}
}
函数checkNextNumber（）{
var nextDigit=当前数字-1，
nextEl=$（'.numbers p:n子元素（'+nextDigit+'），//元素
nextValue=parseInt（nextEl.text（））；
如果（下一个值<9）{
currentDigit=nextDigit；
递增数字（当前数字，下一个值）；
currentDigit=nextDigit+1；
}否则{
递增编号（nextDigit，-1）；
检查第三个数字（）；
}
}
函数计数（）{
var el=$（'.numbers p:n子元素（'+currentDigit+'），//元素
currentValue=parseInt（el.text（））；//元素值
如果（当前值<9）{
递增编号（currentDigit，currentValue）；
}否则如果（currentDigit>=2&¤tDigit<6）{
递增数字（当前数字，-1）；
checkNextNumber（）；
}否则{
当前数字=0；
}
}
setupCountTimer（）；

对于任何感兴趣的人，我通过使用jQuery promise函数按顺序运行所有动画，基本上解决了这个问题。下面的函数是“runAnimations”，下面列出了我的函数“incrementNumber”的更新版本，供感兴趣的人使用

// Run animations sequentially using jQuery promise
var runAnimations = function(functionArray){
    var func = functionArray.splice(0,1);
    func[0]().promise().done(function(){
        if(functionArray.length > 0 ) {
            runAnimations(functionArray);
        }
    });
}

function incrementNumber(digit, value) {
    var $el = $('.numbers p:nth-child(' + digit + ')'), // Element
        newValue = value + 1;

        // Animate current number out
        numberOut = function() {
            $el.animate({marginTop: "-150px"}, 200, "swing");
            return $el;
        };

        // Setup the next number
        setNextNumber = function() {
            $el.text(newValue);
            $el.css({marginTop: "150px"});
            return $el;
        };

        // Animate next number in
        numberIn = function() {
            $el.animate({marginTop: "0px"}, 200, "swing");
            return $el;
        };

        runAnimations([numberOut,setNextNumber,numberIn]);
}