javascript - Controller 中的 Angular 去抖动(非输入)

Question

我有一个网站，我需要在点击事件上获得一些去抖动功能，并且我已经在网上搜索以找到合适的解决方案，但未能找到。

我有两个链接，每个链接都有自己的数据类型，这些数据在下面的列表中使用。

<li ng-class="{'active' : type == 'own'}">
    <a ng-click="changeType('own')" href="#"><span aria-hidden="true" class="icon icon-user"></span> Mine arbejdsgrupper</a>
</li>
<li ng-class="{'active' : type == 'all'}">
    <a ng-click="changeType('all')" href="#"><span aria-hidden="true" class="icon icon-cabinet"></span> Foreslåede arbejsgrupper</a>
</li>

如果我快速切换，(单击第一个，然后单击第二个)无法跟踪异步获取以获取数据，因此即使我先单击第二个链接，我也会从列表中的第一个链接获取内容。

我可以看到有一个 ng-model-options，但我不知道我是否可以在这里。
如果我需要使用下划线去抖动，我会很难过，所以我需要 $scope.$apply 对范围的每个更改。

任何人都有一些ideers？

编辑!

一个 friend 发给我的。
How to write a debounce service in AngularJS
它应该可以解决问题。

Answer 1

你在错误的层面上思考这个问题。根据经验，我认为 UI 应该只有非常简单的交互，主要只是函数调用，即我尝试限制 UI 中的表达式和逻辑。

所以我会在点击这些方法后在 Controller 中去抖动。

angular.module('app-controlllers').controller('ACtrl', [
'$scope',
function ($scope) {
    var debounceAllFn = _.debouce(function () {
        // your actual function implementation
    }. 500),
    debounceOwnFn = _.debouce(function () {
        // your actual function implementation
    }. 500);

    $scope.changeType = function (type) {
        switch (type.toLowerCase()) {
            'all' : 
                debounceAllFn();
                break;
            'own' : 
                debounceOwnFn();
                break;
        }
    }
}
]);