无法在特定点停止进度栏

Question

Demo

Using jQuery progressbar.js plugin I am not able to stop the progress bar at any certain point. Unfortunately the plugin api didn't explain how to do this but I tried to do it on my own by declaring a target variable which is storing progress value.

 target = bar.value();

Then I tried to stop the progress by applying an if condition like this

if ((target * 100).toFixed(0) == 60) {
    circle.stop();
}

but this is not stopping the progress bar on 60! I tried to use this based on the circle.stop(); function (If you click on stop button it stops the progess and alerts the value of bar (target) but the if stattement not working!

var target;
var circle = new ProgressBar.Circle('#container', {
    color: '#FCB03C',
    strokeWidth: 3,
    trailWidth: 1,
    duration: 1500,
    bar: 60,
    text: {
        value: '0'
    },
    step: function (state, bar) {
        bar.setText((bar.value() * 100).toFixed(0));
        target = bar.value();
    }
});

circle.animate(1, function () {
    circle.animate();
})


if ((target * 100).toFixed(0) == 60) {
    circle.stop();
}


$('#stop').on('click', function () {
    circle.stop();
    alert((target * 100).toFixed(0));
});

Can you please let me know what I am doing wrong and how I can solve this? Thanks

Answer 1

The reason your demo isn't working is you're checking the target only once, when it's just declared, without any value. (undefined * 100).toFixed(0) == "NaN" . Since javascript isn't reactive by default, you have to check the condition every time target updates. The step function is perfect for this, since it's called every time value changes. To fix the error, move:

if ((target * 100).toFixed(0) == 60) {
    circle.stop();
}

inside step function:

step: function (state, bar) {
    bar.setText((bar.value() * 100).toFixed(0));
    target = bar.value();
    if ((target * 100).toFixed(0) == 60) {
        circle.stop();
    }
}

Fixed demo .