jQuery成本计数器给出奇怪的输出，使用setInterval循环动画

Question

我有一个codepen，只需要一个计数器，你可以计算便士和磅，直到用户点击停止。成本是根据示例（50）中的小时费率计算的。

为什么我得到奇怪的问题，计数器在3处重置，当动画完成时我正在更新变量。

非常感谢任何帮助，谢谢。

http://codepen.io/matt3224/pen/QyydVB?editors=001

$(function(){

    var doc = $(document),
        rate = parseFloat(50 / 60 / 60).toFixed(4),
        earned = rate,
        paused = false;

    doc.on('click', '.js-start', function(e){

        e.preventDefault();

        $(this).text('Stop').removeClass('js-start').addClass('js-stop js-start--stop');

        setInterval(function(){

            if(!paused){

                var perSec = +earned + +rate;

                $({someValue: earned}).animate({someValue: perSec}, {
                    duration: 1000,
                    step: function() {
                        $('.js-count').text('£' + parseFloat(this.someValue).toFixed(2));
                    },
                    complete: function() {
                        earned = parseFloat(+earned + +rate).toFixed(2);
                    }
                });

            }

        }, 1000);

    });

    doc.on('click', '.js-stop', function(e){

        e.preventDefault();

        $(this).text('Start').removeClass('js-stop js-start--stop').addClass('js-start');

        paused = true;

    });

});