AngularJS用超时等待函数在继续之前完成

Question

我正在使用AngularJS构建一个webapp，并试图创建一个过渡动画。按下按钮时，内容将淡出超过200毫秒，更改为新内容，然后再次在200毫秒内淡入。下面是通过在按钮上单击调用的函数。

$scope.homeButton = function(){ 
 
\t fadeOut(); 
 
\t $scope.content="dolor sit amet"; 
 
\t fadeIn(); 
 
\t resetButtons(); 
 
\t $scope.homeButtonSrc = "res/homebuttonselected.png"; 
 
};

然而，当函数被调用时，内容立即更改，然后淡出。再次单击按钮可在淡入和淡出动画之间来回切换。下面显示了fadeIn（）和fadeOut（）。

var fadeOut = function fadeOut(){ 
 
\t var countDown = function(){ 
 
\t \t $scope.contentOpacity -= .01; 
 
\t \t if($scope.contentOpacity > 0){ 
 
\t \t \t $timeout(countDown, 2); 
 
\t \t } 
 
\t } 
 
\t $timeout(countDown, 2); 
 
} 
 
var fadeIn = function fadeIn(){ 
 
\t var countUp = function(){ 
 
\t \t $scope.contentOpacity += .01; 
 
\t \t if($scope.contentOpacity < 1){ 
 
\t \t \t $timeout(countUp, 2); 
 
\t \t } 
 
\t } 
 
\t $timeout(countUp, 2); 
 
}

任何帮助，将不胜感激！

Answer 1

您的代码中没有使用承诺，这是由$ timeout函数默认给出的。 因此，您的代码使用的时间间隔仅为2ms，而不是200ms。

试图改变你的代码是这样的：

$scope.homeButton = function(){ 
    fadeOut().then(function(){ 
     $scope.content="dolor sit amet"; 
     fadeIn().then(function(){ 
     resetButtons(); 
     $scope.homeButtonSrc = "res/homebuttonselected.png"; 
     }); 
    }); 
}; 

和你的淡入（）和淡出功能..

var fadeIn = function fadeIn(){ 
    var countUp = function(){ 
     $scope.contentOpacity += .01; 
     if($scope.contentOpacity < 1){ 
      $timeout(countUp, 2); 
     } 
    } 
    return $timeout(countUp, 200); //return here it's important 
} 
//same for fadeOut... 

但真正的答案是使用NG-动画来执行你的angularjs上的动画。 有关更多信息，请参阅docs，我真的建议你这样做。