javascript - Angular 旋转器 : functions execution order

Question

我对开发非常陌生，尤其是 AngularJS。我的应用程序中有一些缓慢的功能，我想在功能运行时显示一个微调器。我发现Angular-Spinner应该可以正常工作。

我创建了一个div

<div ng-show="spinner" class="results_overlay ng-cloak">
    <span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>
</div>

我把它放在页面顶部

.results_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.5);
}

并且我将其隐藏在 Controller 中:

$scope.spinner = false;

当按下按钮时，我想:

1. 显示隐藏的div
2. 启动微调器
3. 执行缓慢的操作
4. 停止旋转
5. 再次隐藏 div

我正在尝试使用此代码:

$scope.addDog = function () {
        $scope.spinner = true;
        usSpinnerService.spin('spinner-1');
        $scope.dogs.push({
            id: $scope.dogs.length + 1,
            name: $scope.name,
            age: $scope.age,
            random: $scope.random()
        });

        // Clear input fields after push
        $scope.name = "";
        $scope.age = "";
        usSpinnerService.stop('spinner-1');
        $scope.spinner = false;
    };

显然什么也没有发生，玩了一下代码，我明白输出被完全推到屏幕上，因此带有微调器的 div 同时被激活和停用。有没有办法实现我想要实现的目标？

Plunker 上的示例:我正在生成一个很长的随机数序列，以使该函数非常慢。

Answer 1

我从来没有处理过这样的情况，我的观点是，让代码像这样挂起浏览器是不好的做法。可能有更好的方法来实现您的总体目标。尽管如此，超时功能将允许在浏览器因长时间计算而挂起之前显示微调器:

$scope.addDog = function () {
    $scope.spinner = true;
    usSpinnerService.spin('spinner-1');
    var myObj = {
      id: $scope.dogs.length + 1,
      name: $scope.name,
      age: $scope.age
    };
    $scope.dogs.push(myObj);
    $timeout(function() {
      myObj.random = $scope.random();
      usSpinnerService.stop('spinner-1');
      $scope.spinner = false;
    });
    // Clear input fields after push
    $scope.name = "";
    $scope.age = "";
};

您仍然过度使用浏览器，因此没有任何保证。请记住，您的代码甚至会挂起我的 MSI GS70。如果您发现旋转器在计算开始之前仍未启动，请尝试设置更长的超时时间。