角度状态转换暂停超时

Question

我有一个Angular应用程序，并且我在使用Javascript和超时的按钮上使用活动状态（颜色更改）。像这样的事情在我的服务：

HTML：

<div class="btn-numeric" ng-mousedown="highlightButtonThenAddValue(4, $event)">4</div> 

控制器代码：

var abc = []; 

var highlightButtonTouch = function (event, addClassName) { 
    var element = event.currentTarget; 
    var currClasses = element.classList.add(addClassName); 
    setTimeout(function() { 
    element.classList.remove(addClassName); 
    }, 100); 


$scope.highlightButtonThenAddValue = function (value, event) { 
    log.debug("button pressed on screen, button value: " + value); 
    highlightButtonTouch(event, 'btn-numeric-active'); 
    $scope.add_value(value); 
}; 

$scope.add_value(value) { 
    abc.push(value); 
    if (abc.length === 6) { 
     $state.go(newState); 
    } 
} 

这工作正常，如果按钮颜色的变化是相同的状态。但是，当添加足够的值时，我需要使用state.go来更改状态，并且在这种情况下，即使在100ms之后，类'btn-numeric-active'也不会被删除，而是将css更改为添加btn-numeric-active停留直到状态改变。我在新状态上定义了一些解决方法 - 我正在将API调用到服务器。

只有将Chrome性能选项卡中的CPU降至10Xslowdown时，才能看到此问题。但我的应用程序应该运行在慢速机器上。

有没有人遇到过类似的问题？对于如何解决这个问题，有任何的建议吗 ？

事情我已经尝试：

我不能使用：active伪类，因为这使得即使在触摸和拖拽活跃状态，而点击未注册。

我已经尝试将元素定义为rootScope变量，但那也不能解决问题。

任何建议是值得欢迎的。

Answer 1

现在我知道是什么问题，是因为它的JavaScript的工作方式。

超时回调被添加到调用堆栈中。在进行状态更改时，我有一些“解决方法”，我在其中进行API调用，那些也在调用堆栈中添加回调，并且它是一个堆栈，在回调超时之前正在处理解析的回调。

因此，element.classList.remove(addClassName);行正在所有完成状态转换的API调用后执行。我不得不作出以下修改我的代码，事情的工作：

var highlightButtonTouch = function (event, addClassName) { 
    var deferred = $q.defer(); 
    var element = event.currentTarget; 
    var currClasses = element.classList.add(addClassName); 
    setTimeout(function() { 
    element.classList.remove(addClassName); 
    deferred.resolve(); 
    }, 100); 
    return deferred.promise; 
} 

并在控制器：

$scope.highlightButtonThenAddValue = function (value, event) { 
    log.debug("button pressed on screen, button value: " + value); 
    highlightButtonTouch(event, 'btn-numeric-active').then(function() { 
     $scope.add_value(value); 
    }); 
}; 

这解决了这个问题。

愚蠢的我，我应该不断提醒自己基本的javascript行为 - 事件循环和调用堆栈。

Answer 2

你可以尝试将它包装在指令中吗？

angular.module('test', []) 
 
.controller('TestController', TestController) 
 
.directive('fancyButton', fancyButtonDirective); 
 

 
function TestController() {} 
 

 
function fancyButtonDirective() { 
 
    return { 
 
    scope: { name: '@' }, 
 
    template: '<button type="button" ng-mouseover="highLight()">{{name}}</button>', 
 
    link: function(scope, element, attrs) { 
 
     scope.highLight = function() { 
 
     var button = element.find('button')[0]; 
 
     button.classList.add('light'); 
 
     setTimeout(function() { button.classList.remove('light'); }, 200); 
 
     } 
 
    } 
 
    } 
 
}

.light { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app='test' ng-controller='TestController'> 
 
    <fancy-button name="Fancy 1"></fancy-button> 
 
</div>