使用 AngularJS 显示慢速脚本的加载动画? [英] Show loading animation for slow script using AngularJS?

问题描述

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

In angularjs 1.2 operations like filtering an ng-repeat with many rows (>2,000 rows) can become quite slow (>1 sec).
I know I can optimize execution times using limitTo, pagination, custom filters, etc. but I'm still interested to know if it's possible to show a loading animation while the browser is busy running long scripts.

在 angular 的情况下，我认为可以在 $digest 运行时调用它，因为这似乎是占用最多时间并且可能被多次调用的主要函数.

In case of angular I think that could be invoked whenever $digest is running because that seems to be the main function that takes up most time and might be called several times.

在一个相关问题中没有给出有用的答案.非常感谢任何帮助！

In a related question there were no useful answers given. Any help greatly appreciated!

推荐答案

问题是只要 Javascript 正在执行，UI 就没有机会更新.即使您在过滤之前 显示了一个微调器，只要 Angular 很忙，它就会出现冻结".

The problem is that as long as Javascript is executing, the UI gets no chance to update. Even if you present a spinner before filtering, it will appear "frozen" as long as Angular is busy.

解决这个问题的一种方法是分块过滤，如果有更多数据可用，则在一小段 $timeout 后再次过滤.超时使 UI 线程有机会运行并显示更改和动画.

A way to overcome this is to filter in chunks and, if more data are available, filter again after a small $timeout. The timeout gives the UI thread a chance to run and display changes and animations.

演示原理的小提琴是这里.

它不使用 Angular 的过滤器(它们是同步的).相反，它使用以下函数过滤 data 数组:

It does not use Angular's filters (they are synchronous). Instead it filters the data array with the following function:

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 接收过滤器的结果.

It requires 2 support variables: $scope.filtering is true when the filter is active, giving us the chance to display the spinner and disable the input; $scope.filteredData receives the result of the filter.

有3个隐藏参数:

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

• the chunk size (counter < 5) is small on purpose to demonstrate the effect
• the timeout delay ($timeout(innerFilter, 10)) should be small, but enough to give the UI thread some time to be responsive
• the actual filter logic, which should probably be a callback in real life scenarios.

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

This is only a proof of concept; I would suggest refactoring it (to a directive probably) for real use.

这篇关于使用 AngularJS 显示慢速脚本的加载动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！