无法停止进度条上某一点

Question

Demo

使用jQuery插件progressbar.js我不能够在任何特定点停止进度条。不幸的是，插件api没有解释如何做到这一点，但我试图通过声明一个正在存储进度值的目标变量来完成。

target = bar.value(); 

然后我试图通过应用如果这样

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

条件，但这不是停在60进度条停止前进！我试图用此基础上circle.stop();功能（如果你停止按钮点击停止陆侃和警报条（价值目标），但如果stattement不工作！

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

能否请你让我知道我做错了什么，我怎么能解决这个问题？谢谢

Answer 1

你的演示不工作的原因是你只检查目标一次，当它只是宣布，没有任何价值(undefined * 100).toFixed(0) == "NaN"。由于javascript isn' t默认情况下，你必须每次检查条件target更新。step函数是完美的，因为它被称为每次值变动ES。要修正此错误，移动：

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

内step功能：

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

Fixed demo。