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 stay直到国家改变。我在新状态上定义了一些结果 - 我正在对服务器进行API调用。

您只能在Chrome性能标签中将CPU降低到10Xslowdown时看到此问题。但我的应用程序应该在慢速机器上运行。

有没有人遇到类似的问题？有关如何解决此问题的任何建议吗？

我尝试过的事情：

我无法使用：active pseudo class，因为即使在点击未注册的情况下触摸和拖动也能启用活动状态。

我尝试将元素定义为rootScope变量，但这也无法解决问题。

欢迎提出任何建议。

Answer 1

您可以尝试将其包装在指令中吗？

＆＃13;

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);
      }
    }
  }
}

＆＃13;

.light {
  background-color: yellow;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

在调用堆栈中添加超时回调。在状态变化期间，我有一些＆＃39;做出决定＆＃39;我正在进行API调用，那些也在调用堆栈中添加回调，并且它是一个堆栈，解析的回调正在回调超时之前被处理。

因此，在完成状态转换的所有API调用之后，正在执行行public getTagData(): any { return this.http.get("data/tag.data.jso") }。我必须对我的代码进行以下更改，以便工作：

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;
}

这解决了这个问题。

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

角度状态转换暂停超时

2 个答案: