javascript - 使用 AngularJS 为慢速脚本显示加载动画？

Question

在 angularjs 1.2 中，像过滤具有许多行(>2,000 行)的 ng-repeat 操作会变得非常慢(>1 秒)。
我知道我可以使用 limitTo、分页、自定义过滤器等来优化执行时间，但我仍然想知道是否可以在浏览器忙于运行长脚本时显示加载动画。

在 Angular 情况下，我认为可以在 $digest 运行时调用它，因为它似乎是占用大部分时间的主要功能，可能会被调用多次。

在 related question 中没有给出有用的答案。非常感谢任何帮助!

Answer 1

问题是只要 Javascript 还在执行，UI 就没有机会更新。即使您在过滤之前显示一个微调器，只要 Angular 忙碌，它就会显示为“卡住”。

克服这个问题的一种方法是分 block 过滤，如果有更多数据可用，在一个小的 $timeout 之后再次过滤.超时让 UI 线程有机会运行并显示更改和动画。

演示原理的 fiddle 是 here .

它不使用 Angular 的过滤器(它们是同步的)。相反，它会过滤 data具有以下功能的数组:

function filter() {
    var i=0, filtered = [];
    innerFilter();

    function innerFilter() {
        var counter;
        for( counter=0; i < $scope.data.length && counter < 5; counter++, i++ ) {
            /////////////////////////////////////////////////////////
            // REAL FILTER LOGIC; BETTER SPLIT TO ANOTHER FUNCTION //
            if( $scope.data[i].indexOf($scope.filter) >= 0 ) {
                filtered.push($scope.data[i]);
            }
            /////////////////////////////////////////////////////////
        }
        if( i === $scope.data.length ) {
            $scope.filteredData = filtered;
            $scope.filtering = false;
        }
        else {
            $timeout(innerFilter, 10);
        }
    }
}

它需要 2 个支持变量:$scope.filtering是true当过滤器处于事件状态时，让我们有机会显示微调器并禁用输入； $scope.filteredData接收过滤器的结果。

有3个隐藏参数:

• block 大小 ( counter < 5 ) 很小是为了演示效果
• 超时延迟 ( $timeout(innerFilter, 10)) 应该很小，但足以给 UI 线程一些时间来响应
• 实际的过滤逻辑，在现实生活场景中应该是回调。

这只是概念验证；我建议重构它(可能是一个指令)以供实际使用。