javascript - AngularJS:在长时间运行的循环期间强制 DOM 更新(即进度指示器)

Question

我的应用程序允许用户提供数据进行分析，我想提供一个进度指示器。尽管我的模型正确反射(reflect)了进度，但 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 看到它.