1

jqueryuiプログレスバーを使用しようとしています。以下は私が持っているコードです

<!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（）関数が機能していません。どんな助けでもかなりのものになります。

4

1 に答える 1

2

タイムアウト期間が短すぎます。の2番目のパラメーターは、実行までのミリ秒setTimeout()数です。ブラウザは、「停止」命令を受け取るずっと前に、アニメーションの20ステップすべて（100/5）をスタックに配置しています。

タイムアウト間隔を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デモ

于 2012-12-18T07:03:30.250 に答える