執行一個特定的時間的函數 - 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);