Jquery 在循环中更新html5进度条_Jquery_Html_Progress Bar

Jquery 在循环中更新html5进度条

jquery html

Jquery 在循环中更新html5进度条,jquery,html,progress-bar,Jquery,Html,Progress Bar,在下面的代码中，html5标记的值会每一次更新一次。我还可以通过Chrome的控制台看到它的价值动态变化。但为什么渲染仅在周期结束时更新 <!doctype html> <meta charset="utf8"></meta> <title></title> <body> <script src="http://code.jquery.com/jquery-latest.min.js"></scri

在下面的代码中，html5

标记的值会每一次更新一次。我还可以通过Chrome的控制台看到它的价值动态变化。但为什么渲染仅在周期结束时更新

<!doctype html>
<meta charset="utf8"></meta>
<title></title>
<body>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>

  <button>click</button>
  <progress  min="0" max="10000" value="0"></progress>

  <script>
    $("button").click(function(){
        for(var i=0; i<8000; i++)
            $("progress").val(i)
    })
  </script>


点击
$（“按钮”）。单击（函数（）{
对于（var i=0；i这将是因为您正在锁定UI。此代码与更新UI的代码在同一线程中运行，因此即使您更新进度条的值，处理器也没有时间更新UI
解决此问题的最简单方法是在超时时运行循环：
    $("button").click(function(){
        var count = 0;

        var timeout = setTimeout(doLoop, 0);

        function doLoop() {
            $("progress").val(count);
            count++;
            if(count < 8000) {
                var timeout = setTimeout(doLoop, 0);
            }
            else {
                clearTimeout(timeout)
            }
        }
    });

$（“按钮”）。单击（函数（）{
var计数=0；
var timeout=setTimeout（doLoop，0）；
函数doLoop（）{
$（“进度”）.val（计数）；
计数++；
如果（计数<8000）{
var timeout=setTimeout（doLoop，0）；
}
否则{
clearTimeout（超时）
}
}
});

这将异步运行您的代码。这意味着UI线程有时间在处理循环之间更新UI
要想在现代浏览器中更高级地实现这一点，我建议您也看看web workers，但这仍然是最好的跨浏览器方式。
您可以使用动画
方法让用户更清楚地看到工具栏的进度，如下所示：
$("button").click(function(){
    for(var i=0; i<800; i++)
        $("progress").animate({ value: "+=10" }, 1);
})

$（“按钮”）。单击（函数（）{
对于（var i=0；i）您的答案是完整的，并且教了很多东西。我会将@andri的答案标记为正确的，因为它很简单，但您的评论肯定会在其他情况下有用。谢谢！此解决方案适用于jquery 1.9.1，但不适用于2013年6月17日的jquery最新版本