javascript - angular ui-router 卡在状态之间

Question

我在项目中使用 UI-Router。我正在使用路由器提供的状态解析功能。当我想在两个状态之间显示一个加载程序并且我经常更改状态时，微调器弹出但不再消失。
可以在此处找到相同的效果。
http://rp.js.org/angular-ui-view-spinner/example/index.html
如果在两种状态之间快速单击，加载程序将不会隐藏。
我正在等待 stateChangeStart 广播并显示加载器，在 statChangeSuccess、stateChangeError 和 viewContentLoaded 上我不想隐藏加载器。 stateChangeStart 被触发，但 stateChangeSuccess 没有。知道为什么会出现这种行为吗？
我在 0.2.18 版本中使用 angular-ui-router

这里是显示和隐藏的代码:

    $rootScope.$on('$stateChangeStart', showLoading);
    $rootScope.$on('$stateChangeSuccess', hideLoading);
    $rootScope.$on('$stateChangeError', hideLoading);
    $rootScope.$on('$viewContentLoaded', hideLoading);

    function showLoading() {
        $timeout(function () {
            angular.element('.loading-indicator').show();
        }, 50);
    }


    function hideLoading() {
        $timeout(function () {
            angular.element('.loading-indicator').hide();
        }, 50);
    }

Answer 1

您需要取消之前的定时器。请参阅此处的文档:https://docs.angularjs.org/api/ng/service/ $超时。

var yourTimer;
function showLoading() {
    if (yourTimer) {$timeout.cancel(yourTimer);}
    yourTimer = $timeout(function () {
        angular.element('.loading-indicator').show();
    }, 50);
}


function hideLoading() {
    if (yourTimer) {$timeout.cancel(yourTimer);}
    yourTimer = $timeout(function () {
        angular.element('.loading-indicator').hide();
    }, 50);
}