AngularJS:在长时间循环期间强制更新DOM(即进度指示器）

AngularJS: force DOM update during long-running loop (i.e. progress indicator)

本文关键字：DOM 指示器 更新 长时间 循环 AngularJS      更新时间：2023-09-26

我的应用程序允许用户提供数据进行分析，我想提供一个进度指标。尽管我的模型正确地反映了进度，但DOM只有在分析结束时才会更新（因此也会在摘要循环结束时更新）。有没有一种方法可以强制渲染中间摘要？

我意识到我的另一个选择是提取分析，使其独立于摘要循环运行，然后调用$scope$应用，但这种重构是不可取的。

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

如果将循环置于摘要之外并不重要，只要它是主线程的一部分并保持同步，它就不会更新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上看到它。

相关文章：