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

Question

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

我真正关心的是我遇到的一个闪烁问题，如果您在操作系统上切换选项卡或切换程序并返回浏览器，数字将会闪烁。

例如，只需尝试下面的小提琴并尝试 alt+tab 到另一个程序 10 秒然后返回，您应该会看到闪烁。

http://jsfiddle.net/4KPGh/

提前感谢任何可以启发我了解导致此问题的原因的人！正如您从代码中看到的那样，我已经为计时器使用了 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();

Answer 1

对于任何感兴趣的人，我设法通过使用 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]);
}