Question

不确定我有什么选项，我想在后台运行的控制器中运行一个循环，并且每隔n毫秒步进一次，它只会改变按钮上的颜色，希望它来自绿色到橙色，然后使用ng-style返回。

在后台运行循环的合理方法是什么？出于显而易见的原因，我想避免锁定整个页面只是为了让按钮改变颜色。

Answer 1

由于您使用的是Angular，因此您应该使用Angular解决方案：$interval。

一个简单的例子，假设您在范围中使用布尔值来确定按钮是绿色还是橙色：

angular.module('myApp', [])
    .controller('myController', ['$scope', '$interval',
        function($scope, $interval) {
            $scope.isGreen = true;

            $interval(function() {
                $scope.isGreen = !$scope.isGreen;
            }, 1000);
        }
    ]);

这将每秒切换$scope.isGreen。

Answer 2

我想也许css选项可能是去这里的方式。你可以在css中循环动画。

Keyframe Animation Syntax

这是一个例子

＆＃13;

@-webkit-keyframes looping-background {
  0%   { background-color: orange; }
  50% { background-color: green; }
  100% { background-color: orange; }
}
@-moz-keyframes looping {
  0%   { background-color: orange; }
  50% { background-color: green; }
  100% { background-color: orange; }
}
@-o-keyframes looping {
  0%   { background-color: orange; }
  50% { background-color: green; }
  100% { background-color: orange; }
}
@keyframes loopingN {
  0%   { background-color: orange; }
  50% { background-color: green; }
  100% { background-color: orange; }
}

.loop_animation {
  -webkit-animation: looping-background 2s infinite; /* Safari 4+ */
  -moz-animation:    looping-background 2s infinite; /* Fx 5+ */
  -o-animation:      looping-background 2s infinite; /* Opera 12+ */
  animation:         looping-background 2s infinite; /* IE 10+, Fx 29+ */
}

＆＃13;

<button class="loop_animation">I am a button</button>

＆＃13;

Answer 3

使用javascript事件计时器来调用函数。

https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers

Answer 4

为什么不使用

setTimeout(function(){
                          // change the color of button here
                          }),n*1000);

应该在递归循环中调用此设置超时。

<body onload = "changeButtonColor()">

<script>
function(){
         // change the color here 
         setTimeout(function(){
                          // change the color of button here
                          }),n*1000);
         }
</script>

在Angular中在后台运行循环

4 个答案: