Question

我有一个AngularJS应用程序。我的应用程序允许用户输入一个数字并按下执行。当按下执行按钮时，我正在动态构建一个数组进行处理。在构建阵列时，UI似乎已锁定。我有以下内容：

<input type="text" ng-model="numToExecute"></input>
<button class="btn btn-primary" ng-click="execute()">Execute</button>

<div class="alert alert-info" role="alert" ng-if="buildingArray === true">
  <strong>Building array</strong><br />
</div>

$scope.preloadedItems = loadArray();
$scope.executeTests = function() {
  $scope.buildingArray = true;

  var i = 0;
  angular.forEach($scope.preloadedItems, function(item) {
    if (i < numToExecute) {
      $scope.myArray.push({ id: item.id });      
    }
    i = i + 1;
  });

  $scope.buildingArray = false;
  $scope.processArray();
};

表示＆＃34;建筑阵列＆＃34;永远不会出现它就像ui一样锁定，直到angular.forEach语句完成。 preloadedItems数组中有数千个条目。这就是为什么我要展示＆＃34;建立阵列＆＃34;框。

有没有办法取消阻止用户界面？或者，至少显示建筑物阵列框？

谢谢！

Answer 1

如果您执行大量计算或创建非常大的数据，您应该记住所有页面都在一个线程中工作。您可以将处理代码拆分为多个部分，这样UI就会刷新，它会有点慢，但是会有效！

有一个延迟执行的功能 - setTimeout。例如，您可以在代码中运行一个循环，每次迭代都在setTimeout中运行。

Answer 2

将angular.forEach放入$ timeout

$timeout(function(){
  angular.forEach($scope.preloadedItems, function(item) {
    if (i < numToExecute) {
      $scope.myArray.push({ id: item.id });      
    }
    i = i + 1;
  });
},0)

解锁AngularJS UI

2 个答案: