Javascript 使用setInterval 0更新的进度条仍然需要时间才能完成_Javascript_Progress Bar_Setinterval

Javascript 使用setInterval 0更新的进度条仍然需要时间才能完成

javascript

Javascript 使用setInterval 0更新的进度条仍然需要时间才能完成,javascript,progress-bar,setinterval,Javascript,Progress Bar,Setinterval,很抱歉我是个笨蛋，但我开始学习JavaScript，有点小问题在下面的代码示例中，进度条在1秒内从0变为100，但是“time”变量被设置为0毫秒，由setInterval使用。当我按下按钮时，我希望progressbar立即达到100%。（我将有不到一秒钟完成的进度，我想正确地显示它们。）看起来setInterval没有使用给定的毫秒时间所以我的问题是，我如何设置setInterval以使用毫秒，正如它应该的那样？（我知道如果你再次单击按钮，它会表现得很奇怪，但现在这不重要了。）谢谢 &

很抱歉我是个笨蛋，但我开始学习JavaScript，有点小问题

在下面的代码示例中，进度条在1秒内从0变为100，但是“time”变量被设置为0毫秒，由setInterval使用。当我按下按钮时，我希望progressbar立即达到100%。（我将有不到一秒钟完成的进度，我想正确地显示它们。）看起来setInterval没有使用给定的毫秒时间

所以我的问题是，我如何设置setInterval以使用毫秒，正如它应该的那样？（我知道如果你再次单击按钮，它会表现得很奇怪，但现在这不重要了。）

谢谢

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button id="theButton">click</button>
<progress id="progressbar" min="0" value="0" max="100"></progress>
<span class="progress-value">0%</span>
    <script>
        $('#theButton').click(function(){
            var progressbar = $('#progressbar'),
                max = progressbar.attr('max'),
                time = 0,   
                value = progressbar.val();

            var loading = function() {
                value += 1;
                addValue = progressbar.val(value);

                $('.progress-value').html(value + '%');

                if (value == max) {
                    clearInterval(animate);
                }
            };

            var animate = setInterval(function() {
                loading();
            }, time);
        });
    </script>


点击
0%
$（“#按钮”）。单击（函数（）{
var progressbar=$（“#progressbar”），
max=progressbar.attr（'max'），
时间=0，
value=progressbar.val（）；
var加载=函数（）{
数值+=1；
addValue=progressbar.val（值）；
$（'.progress value'）.html（value+'%'）；
如果（值==最大值）{
clearInterval（动画）；
}
};
var animate=setInterval（函数（）{
加载（）；
}，时间）；
});

您是否有用于此目的的JSFIDLE或PLUNK？创建了PLUNK：