更新循环中的html5进度栏

在以下代码中，每个cicle都会更新html5 <progress>标记的值。我也可以看到它的价值使用Chrome的控制台动态变化。但为什么渲染仅在周期结束时更新？更新循环中的html5进度栏

<!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>

来源

2013-03-14 leonard vertighel

你可以使用animate方法，使栏给用户更加明显，像这样的进展：

$("button").click(function(){ 
    for(var i=0; i<800; i++) 
     $("progress").animate({ value: "+=10" }, 1); 
})

您可以在这里的行动看出来：http://jsfiddle.net/qZJN3/

来源

2013-03-14 09:08:09 andri

此解决方案适用于jquery 1.9.1，但不适用于2013年6月17日的jquery最新版本 – 2013-06-18 00:41:51

这将是因为您正在锁定用户界面。此代码与用于更新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) 
      } 
     } 
    });

现在，这将异步运行代码。这意味着UI线程有时间更新处理循环中的UI。

对于在现代浏览器中进行此操作的更高级方法，我建议您也查看Web工作人员，但这仍是最好的跨浏览器方式。

来源

2013-03-14 09:02:15 CodePB

你的答案是完整的并教了很多。我将@andri的答案标记为正确，因为它很直接，但是您的评论肯定会在其他情况下有用。谢谢！ – 2013-03-14 09:30:18

更新循环中的html5进度栏

回答

相关问题