jquery ui進度條不停止點擊停止按鈕

我想用jquery ui progressbar。以下是我的代碼jquery ui進度條不停止點擊停止按鈕

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<script> 
$(document).ready(function(){ 
$('#progressBar').progressbar({ 
      value: 1 
     }); 
}); 
var statusTracker ; 
var percentage = 0; 
function checkStatus() {//function to fill progress bar 
percentage = percentage +5; 
$("#progressBar > .ui-progressbar-value").animate({ 
    width : percentage + "%" 
}); 
statusTracker = setTimeout(function() {//call this function every 20ms 
    checkStatus() 
}, 20); 
} 

function startProgress(){ 
checkStatus(); 
} 

function stop(){//stop progress bar 


clearTimeout(statusTracker); 

} 
</script> 
</head> 

<body> 
<div id="progressBar" style="opcity:1; height:30px;width:500px;" ></div> 
<p> 
<input type="submit" value="Start" onclick="startProgress()"/> 

<input type="submit" value="Stop" onclick="stop()"/> 
</p> 
</body> 
</html>

當我點擊停止按鈕進度條不停止。我的clearTimeout（）函數不起作用。任何幫助將是可觀的。

來源

2012-12-18 ved

@Cory我想通過點擊stop（）函數來停止這個進度條。 – ved

以下是我上面的問題演示的鏈接 http://jsfiddle.net/kumarohit21/A7Yhs/ 點擊停止按鈕，必須停止進度條。 – ved

您的超時時間太短。 setTimeout()的第二個參數是毫秒的數量，直到執行。在收到你的「停止」指令之前，瀏覽器已經將動畫的所有（100/5）20個步驟放在堆棧上了。

嘗試將超時間隔設置爲500（1/2秒），然後重試。另外，我認爲在這種情況下你最好用setInterval()，而不是使用無限的setTimeout()循環。事情是這樣的：

var statusTracker; 
var percentage = 0; 

function checkStatus() { 
    percentage = percentage + 5; 
    $("#progressBar > .ui-progressbar-value").animate({ 
     width : percentage + "%" 
    }); 
    if (percentage == 100) stop(); 
} 

function startProgress() { 
    statusTracker = setInterval(checkStatus, 500); 
} 

function stop() { 
    clearInterval(statusTracker); 
} 

$(function() { 
    $('#progressBar').progressbar({ 
     value: 1 
    }); 
});

JSFiddle Demo

來源

2012-12-18 07:03:30

jquery ui進度條不停止點擊停止按鈕

回答

相關問題