高度值在定时器上没有正确更新

Question

我已经通过更新定时器函数（setInterval）内的span元素的高度创建了一个进度表。仪表将在悬停时暂停，然后在失去焦点时继续（非悬停）。问题在于，恢复时高度会下降一个或两个像素点，而不是继续前一个高度。我无法弄清楚为什么会发生这种情况，因为传递给定时器函数的值是正确的。有任何想法吗？

这是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 2-14的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();