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

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

Angular-spinner：函数执行顺序

2 个答案: