Выполните функцию для определенного времени вне времени - 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);