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

Question

我的视图中有一个div，我想在ng-click（）上执行一个函数，该函数将div的背景变成"color a"30秒，如果没有采取任何行动，则持续60秒，然后改为"color b"，如果超过120秒没有采取任何措施，则隐藏div。（这也可以通过添加/删除类来完成）

从本质上讲，我希望在一个超时导致另一个超时的角度执行一系列$timeout。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

我会通过在作用域中使用一个变量来保存状态，并链接$timeouts来在状态之间移动来实现它。因此，在将被点击的元素上：

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

在控制器中：

$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的回调不起任何作用，并且作用域上的所有操作始终在promise的then成功回调中。

在后台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}
...

然而，我不确定控制器中还有什么，也不确定您的确切用例。您可能希望将一些逻辑分离成一个指令，因为它可能将业务逻辑与视图逻辑混合在一起。