Angular-spinner：函数执行顺序

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);
}

并且我一直隐藏在我的控制器中：

$scope.spinner = false;

按下按钮时我想：

显示隐藏的div
启动微调器
执行缓慢的操作
停止微调器
再次隐藏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。如果您发现微调器在计算开始前仍未启动，请尝试设置更长的超时时间。

Answer 2

JavaScript 是单线程的，这意味着当您的代码是运行时，浏览器（或者现在通常是您的页面呈现所在的选项卡）不会更新。这进一步意味着如果你长时间阻塞，浏览器将停止响应，这对用户来说不是一个很好的体验（例如，如果他们调整 window 的大小，它不会再次布局页面直到你的代码完成运行).

如果您只有一个很短但足够长的操作想要显示某种进度通知，那么 $timeout 建议是可以的。但是，如果您不知道您的操作需要多长时间，更好的解决方案是重构您的代码以异步方式工作。您可以使用计时器来执行此操作，并在每次计时器运行时处理一小批项目（小到不会阻塞浏览器）。处理完成后，您取消计时器并执行您需要执行的任何操作来更新您的 UI/model 等

Angular-spinner：函数执行顺序

Angular-spinner: functions execution order

javascript

spinner

angularjs