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直到它完成，这没关系。

您的选择是：

设置要在超时功能中执行的每个元素分析，并从那里更新进度。如果你不关心操作的完成顺序，这很好，比如
```
for(i=0; i<arr.length; i++){
    $timeout(function(){
        //do something here and increase the progress counter
    })
}
```

如果您关心订单，请使用类似

的递归函数

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

如果您不关心旧浏览器，请使用网络工程师。这是一个更复杂的解决方案;你可以在w3schools看到它。

AngularJS：在长时间运行的循环中强制DOM更新（即进度指示器）

1 个答案: