Question

在此示例中，在循环的每次迭代中更新UI中的范围变量需要做什么？

JS

var q = 100;
while ( q > 0 ) {
  $scope.someThing = q;
  q--;
}

HTML

{{someThing}}

我以为我正在接触以下内容，但它无效。我所看到的只是最终结果，而不是每次迭代。

var q = 1000;
while ( q > 0 ) {
    $scope.$apply(function () {
      $scope.someThing = q;
      q--;
    });
}

- 编辑 -

感谢有关间隔/超时的建议。我想我明白为什么现在需要这个。但我希望我能以某种方式“回调”重绘，以便循环仍然尽可能快地运行。有没有一种简单的方法来实现这一目标？

Answer 1

~~该循环执行速度非常快 - 你不会看到它计数。~~感谢@PSL更好的解释：基本上JavaScript循环同步运行。 Angular依赖于摘要周期来根据scope属性更新视图。在这种情况下，循环运行然后发生摘要循环。相反，您需要在每次计数后让摘要周期发生，以便看到渐进式更新。

如果您想要它可以使用$timeout：

var q = 100;

function subtractQ() {
    q--;
    $scope.someThing = q;
}

$timeout(subtractQ, 1000);

或$interval

$interval(function() {
    q--;
    $scope.someThing = q;
}, 1000);

Answer 2

您可以尝试使用$ timeout而不是while循环来延迟该功能。

这样的事情：

 $timeout(function(){
    $scope.something = q;
    q--;
  }, 1000);

Answer 3

这是因为你需要在每次迭代之间使用超时进行异步。我将$interval用于此：

＆＃13;

var testApp = angular.module('testApp', []);

testApp.controller('testCtrl', ['$scope', '$interval', function($scope, $interval) {

  var q = 100;
  var interval = $interval(decreaseQ, 50);
  
  function decreaseQ() {
    $scope.someThing = q;
    
    if(q == 0) $interval.cancel(interval);
    else q--;
  }
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="testApp" ng-controller="testCtrl">
  {{someThing}}
</div>

＆＃13;

AngularJS在每个循环的页面上更新范围值

3 个答案: