JQuery Animation Мерцает после переключения программ / вкладок

Question

Итак, я создаю простой счетчик, который отсчитывает от заданного числа, я знаю, что есть определенные ограничения, если счетчик достигает 9999, например, но я не особо беспокоюсь об этом, так как пользователь не будет на странице для Так долго.

Меня волнует проблема мерцания, когда вы переключаете вкладки или переключаете программы в ОС и возвращаетесь в браузер, цифры будут мерцать.

Например, просто попробуйте скрипт ниже и попробуйте alt+tab другой программе в течение 10 секунд, затем вернитесь, и вы должны увидеть мерцание.

http://jsfiddle.net/4KPGh/

Заранее спасибо всем, кто может просветить меня о том, что вызывает это! Как вы можете видеть из кода, я уже использовал 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 для последовательного запуска всех анимаций. Функция, которая делает это, '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]);
}