Question

我正在尝试使用jquery ui progressbar。以下是我的代码

<!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（）函数不起作用。任何帮助都会很明显。

Answer 1

你的超时时间太短了。 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

jquery ui单击停止按钮时，进度条不会停止

1 个答案: