Javascript 高度值未在计时器上正确更新

通过在计时器函数（setInterval）中更新跨度元素的高度，我创建了一个进度表。仪表将在悬停时暂停，然后在失去焦点时继续（取消悬停）。问题是，恢复时高度会下降一两个像素，而不是从上一个高度继续下降。我不明白为什么会发生这种情况，因为传入计时器函数的值是正确的。有什么想法吗

这是一本书

所讨论的javascript是：

function runFlipMeter(meter){
//if meter not defined
if(!meter){
    meter = 0;
}

flipMeter = setInterval(function(){

    if(meter === 0){
        //meter at 0
        grow = true;
        $('.cube').toggleClass('flip');
    }
    else if(meter === 100){
        //reached the top, go back up
        grow = false;
        $('.cube').toggleClass('flip');
    }

    //update meter
    $('#flipperTimer span').height(meter + '%');
    //increment meter
    meter = !grow ? meter-1 : meter+1;

}, 50);

}//end runFlipMeter

---

问题是当您运行

meter=$（“#flipperTimer span”）.height（）时

在函数

pauseFlipMeter

中，您得到的是

meter

numer的

px

，而不是一个百分比数字

var flipMeter; //defined globally so it can be paused/cleared
var grow = false;

function runFlipMeter(meter) {
    //if meter not defined
    if (!meter) {
        meter = 0;
    }

    flipMeter = setInterval(function() {

        if (meter === 0) {
            //meter at 0
            grow = true;
            $('.cube').toggleClass('flip');
        } else if (meter === 100) {
            //reached the top, go back up
            grow = false;
            $('.cube').toggleClass('flip');
        } else if (meter.toString().indexOf('px') > -1) {
            meter = Math.ceil((parseInt(meter, 10) / $('#flipperTimer').height()) * 100);
        }

        //update meter
        $('#flipperTimer span').height(meter + '%');
        //increment meter
        meter = !grow ? meter - 1 : meter + 1;

    }, 50);

} //end runFlipMeter

function pauseFlipMeter() {
    var meter;
    $('#resultsFlipper').hover(function() {
        //pause the meter
        window.clearInterval(flipMeter);
        meter = $('#flipperTimer span').height();

    }, function() {
        //resume the meter
        runFlipMeter(meter + 'px');
    });
}



runFlipMeter();

pauseFlipMeter();