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

问题是，当您在功能meter = $('#flipperTimer span').height();中运行pauseFlipMeter时，您获得了meter px nubmer，而不是百分比数字。

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

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

1 个答案: