javascript - 计时器上的高度值未正确更新

Question

我通过更新计时器函数(setInterval)内的跨度元素的高度创建了一个进度表。仪表将在悬停时暂停，然后在失去焦点(取消悬停)时继续。问题在于，恢复时高度会下降一两个像素，而不是从之前的高度继续。我无法弄清楚为什么会发生这种情况，因为传递到计时器函数的值是正确的。有什么想法吗？

这是一个stripped-down demo .

有问题的 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

Answer 1

问题是，当您在函数 pauseFlipMeter 中运行 meter = $('#flipperTimer span').height(); 时，您会得到一个 meter px 的数量，而不是百分比数字。

See on Codepen

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();