更新循環中的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進度欄

回答

相關問題