無法停止進度條上某一點

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。