高度值在定時器上沒有正確更新

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