Javascript 角度状态转换正在暂停超时

我有一个Angular应用程序，我使用Javascript和超时在按钮上使用活动状态（颜色变化）。在我的服务中：

HTML:

如果按钮颜色更改处于相同的状态，则此操作正常。但是，当添加足够的值时，我需要使用state.go更改状态，在这种情况下，即使在100ms后，类“btn numeric active”也不会被删除，相反，添加btn numeric active的css更改将一直保持到状态更改为止。我在新状态下定义了一些解析——在新状态下，我对服务器进行API调用

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

有没有人面临过类似的问题？有没有关于如何解决这个问题的建议

我尝试过的事情：

我不能使用：active伪类，因为它即使在点击未注册的情况下触摸并拖动，也会启用活动状态

我尝试将元素定义为一个rootScope变量，但这也不能解决问题

---

欢迎您提出任何建议。

您能尝试将其包装成指令吗

角度模块（'test'，[]） .controller（'TestController'，TestController） .指令（“fancyButton”，fancyButtonDirective）； 函数TestController（）{} 函数fancyButtonDirective（）{ 返回{ 作用域：{name:'@'}， 模板：“{name}}”， 链接：函数（范围、元素、属性）{ scope.highLight=函数（）{ var button=element.find（'button'）[0]； button.classList.add（'light'）； setTimeout（function（）{button.classList.remove（'light'）；}，200）； } } } }

.light{
背景颜色：黄色；
}

---

现在我知道了问题所在，这是因为javascript的工作方式

超时回调被添加到调用堆栈中。在状态更改期间，我有几个“解析”，其中我正在进行API调用，这些解析也在调用堆栈中添加回调，作为一个堆栈，解析回调在回调超时之前被处理

因此，行

element.classList.remove（addClassName）。我必须对我的代码进行以下更改，以使其正常工作：

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行为-事件循环和调用堆栈。
你能尝试使用
$timeout
而不是
设置timeout
？@lcycool尝试过。行为没有改变。谢谢你的建议。但我发现问题不同——它与javascript调用堆栈和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);
    });
};