角度状態の遷移が中断タイムアウト

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に減らす場合にのみ表示されます。しかし、私のアプリケーションは遅いマシンで動作するはずです。

誰も似たような問題に直面しましたか？どのようにこれを修正するための任意の提案？

を私は使用することはできません：アクティブ疑似クラスを、クリックが登録されていない間、それはタッチとドラッグにも、アクティブ状態を可能として、私が試してみました

物事。

私はrootScope変数として要素を定義しようとしましたが、これも問題を解決しません。

ご提案は大歓迎です。

Answer 1

今私は、問題が何であるかを知っているそのためにはJavaScriptが動作する方法の。

タイムアウトコールバックがコールスタックに追加されました。状態の変更中に、私はAPIコールを行っているいくつかの '解決法'を持っています。これらはコールスタックにコールバックを追加しています。スタックでは、解決のコールバックがタイムアウトのコールバックの前に処理されています。

したがって、状態遷移のためのすべての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の動作（イベントループとコールスタック）を思い出してください。

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>