执行一个特定时间段的函数-AngularJs

Question

当用户到达这个div时，我想设置一个输入滑块的动画。为了观察用户是否滚动到此div，我使用了一个指令，该指令触发了滑块值的更改。这是代码：

directive("scroll", function ($window, $timeout, $interval) {
          return function(scope, element, attrs) {
              angular.element($window).bind("scroll", function() {
                   if (this.pageYOffset >= 1500) {
                     var timeout = $timeout(function(){
                          var interval = $interval(function(){
                            scope.slider += 4;
                          },25);
                      }, 0);
              });
          };
      })

这样做效果很好，可以平滑地增加值，具有良好的动画效果，但不会停止增加。我试着添加：

                      var second_timeout = $timeout(function(){
                        scope.slider= 400;
                      }, 100)

固定一个值，但它"跳跃"，然后继续增加。

我还尝试添加while循环，以避免滑块的值高于500，这很有效，但没有更多的"动画"效果。

我选择了这种方式，这可能看起来很复杂，因为我没有找到任何方法来制作CSS动画。

是否存在纯angularJs函数来指定应执行函数的时间量？

谢谢你的回答！

Answer 1

您正在定义一个间隔。该功能将继续运行，这就是它不会停止的原因。

你可以这样做：

var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 60){
        clearInterval(interval);
    }
    scope.slider += 4; 
}, 25);