AngularJS：在長時間運行的循環中強制DOM更新（即進度指示器）

Question

我的應用程序允許用戶提供數據進行分析，我想提供一個進度指示器。 盡管我的模型正確地反映了進度，但是DOM僅在分析結束時（因此在摘要循環結束時）更新。 有沒有辦法我可以強制中消化？

我意識到我的另一種選擇是提取分析，使其獨立於摘要循環運行，然后調用$ scope。$ apply，但是這種重構是不可取的。

<div>{{progress}}</div>
<script>
  ...
  for(i=0; i<dataPoints.length; i++){
    ...long-running analysis inside the digest loop...
    $scope.progress = (i+1)/dataPoints.length * 100;
    //how do I force a DOM update here?
  }
  ...
</script>

Answer 1

只要您將循環從摘要中取出，只要它是主線程的一部分並保持同步就沒關系，直到完成，它才更新DOM。

您的選擇是：

1. 設置要在超時功能中執行的每個元素分析，並從那里更新進度。 如果您不關心操作以什么順序完成（例如，

    for(i=0; i<arr.length; i++){ $timeout(function(){ //do something here and increase the progress counter }) } 

2. 如果您關心順序，請使用類似以下的遞歸函數

    function recursive(arr, index){ if(arr.length==index-1){ //you are done } //do something $timeout(function(){ recursive(arr,index+1) }) } 

3. 如果您不關心舊的瀏覽器，請使用webworker。 這是一個更復雜的解決方案。 您可以在w3schools上看到它。