Angular-spinner：函数执行顺序答案

【问题标题】：Angular-spinner: functions execution orderAngular-spinner：函数执行顺序
【发布时间】：2017-01-16 22:59:10
【问题描述】：

我对开发非常陌生，尤其是对 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 上的示例：我正在生成一个非常长的随机数序列，以使函数非常慢。

【问题讨论】：

标签： javascript angularjs spinner

【解决方案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。如果您发现微调器在计算开始前仍未启动，请尝试设置更长的超时时间。

【讨论】：

谢谢！我今天会试一试！我实际上想挂起浏览器来测试微调器。我的真实项目是蒙特卡洛模拟，我需要为用户插入的每个项目生成 500K 到 1M 之间的随机数，计算总数、标准偏差、误差和其他一些东西。它不可避免地需要很长时间（从半秒到 3-4 秒）。这就是为什么我想到了微调器......
好吧，只是为了其他人的利益（我不知道，例如：P），要使用 $timeout，它必须被注入：app.controller('MainCtrl', ['$timeout', '$scope', 'usSpinnerService', '$rootScope', function($timeout, $scope, usSpinnerService, $rootScope) { ... }
@MirkoG。可以肯定的是，变量不只是让它们自己存在 :) 但我想如果你是 Angular 的新手，这可能是一个有用的说明。

【解决方案2】：

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

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

【讨论】：