在特定的时间内执行一个函数 - 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);