javascript - 如何使用 $timeout 在 Angular 中执行一系列事件

Question

我的 View 中有一个div，我想在ng-click()上执行一个函数，如果没有采取任何操作，该函数会将div的背景变为“颜色a”30秒然后持续 60 秒，然后更改为“颜色 b”，如果超过 120 秒没有采取任何操作，则隐藏 div。(这也可以通过添加/删除类来完成)

本质上，我希望以 Angular 执行一系列 $timeouts，其中一个超时会导致另一个超时。

对此的任何帮助将不胜感激。谢谢。

Answer 1

我会通过在范围内使用变量来保存状态并链接 $timeout 来实现它。 s 在各州之间移动。因此，在将被单击的元素上:

<span ng-click="startChange()">Click me to start</span>

在 Controller 中:

$scope.state = 'a';
$scope.startChange = function() {
  $scope.state = 'b';
  return $timeout(angular.noop, 30 * 1000).then(function() {
    $scope.state = 'c';
    return $timeout(angular.noop, 60 * 1000);
  }).then(function() {
    $scope.state = 'd';
    return $timeout(angular.noop, 120 * 1000);
  }).then(function() {
    $scope.state = 'e'
  });
}

angular.noop只是一个不执行任何操作的函数。这有点个人喜好，但我发现更容易查看回调传递到 $timeout 的事件流程。不执行任何操作，作用域上的所有操作始终在 then 中 promise 的成功回调。

在背景 div 的模板中:

<div class="background-state-{{state}}">....</div>

然后在 CSS 中设置颜色:

.background-state-a {background-color: red}
.background-state-b {background-color: green}
.background-state-c {background-color: blue}
...

但是，我不确定 Controller 中还有什么或您的确切用例。您可能希望将一些逻辑分离到指令中，因为它可能会将业务逻辑与 View 逻辑混合在一起。