javascript - 进度条无法正确重置

Question

我在重置进度条并继续计数时遇到一些困难。在我的代码中，我有一个按钮，用于打开一个带有进度条的 JQuery ui 对话框，该进度条计数到 100%，然后关闭。当我再次点击按钮重置进度条时，它只是停留在 0% 而不更新。我的代码中缺少什么吗？

这是我的对话框

$( "#dialog" ).dialog({
    autoOpen: false,
    dialogClass: "no-close", 
    draggable: false, 
    resizable: false, 
    height: 200, 
    width: 200          
});

我打开对话框的按钮

$("#button").click(function() {
    $('#progressbar').progressbar('option','value', 0);
    $( "#dialog" ).dialog( "open" );
});

我的进度条代码

$(function() {
        var progressbar = $( "#progressbar" ),
        progressLabel = $( ".progress-label" );

        progressbar.progressbar({
            value: true,
            change: function() {
            progressLabel.text( progressbar.progressbar( "value" ) + "%" );
        },

        complete: function() {
            progressLabel.text( "Complete!" );
            setTimeout("$('#dialog').dialog('close')",3000);

            }
        });

           function progress() {
          var val = progressbar.progressbar( "value" );
          progressbar.progressbar( "value", val + 2 );
          if ( val < 99 ) {
            setTimeout( progress, 80 );
          }
        }
        setTimeout( progress, 2000 );
});

编辑:这是 html

<div id="dialog" title="Progress Bar">
    <div align="right">
        <small id="name">Name</small>
    </div>
    <small id="temp">Temp</small><br />
    <small id="temp2">Temp2</small><br /><br />
    <div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>

Answer 1

参见fiddle (别人开始了)

单击按钮后，您需要再次启动函数progress()。您还应该确保 Progress() 函数位于按钮单击事件的范围内。

$("#button").click(function() {
     $('#progressbar').progressbar('value', 0);
     $( "#dialog" ).dialog( "open" );
     //restart
     progress();
});