3

Angular 应用程序中是否存在用于计算繁重任务的模式？（不仅仅是使用延迟为 0 的 $timeout 让他们离开调用堆栈？）即使使用 $timeout 似乎也会在处理本身启动时使 UI 无响应。我是否需要查看 Web Workers 或类似的东西那个，还是有“角度方式”？

4

2 回答 2

2

因为 JavaScript 是单线程的，所以您需要在服务器端进行计算，或者在处理之间进行超时（参见下划线的defer()http://underscorejs.org/#defer ）。否则，UI 将不可避免地被阻塞。

于 2013-06-25T14:17:51.607 回答
2

我想出了一种方法来解决我的 UI 响应问题，方法是创建$timeout每次通过循环都使用 Angular 的特殊循环函数。

app.service('responsivenessService', function($q, $timeout) {
    var self = this;

    // Works like Underscore's map() except it uses setTimeout between each loop iteration
    // to try to keep the UI as responsive as possible
    self.responsiveMap = function(collection, evalFn)
    {
        var deferred = $q.defer();

        // Closures to track the resulting collection as it's built and the iteration index
        var resultCollection = [], index = 0;

        function enQueueNext() {
            $timeout(function () {
                // Process the element at "index"
                resultCollection.push(evalFn(collection[index]));

                index++;
                if (index < collection.length)
                    enQueueNext();
                else
                {
                    // We're done; resolve the promise
                    deferred.resolve(resultCollection);
                }
            }, 0);
        }

        // Start off the process
        enQueueNext();

        return deferred.promise;
     }
     return self;
});

此映射函数返回一个可以分配给$scope. 用法类似于map()较新浏览器中来自下划线或原生 Javascript 数组的函数：

$scope.results = responsivenessService.responsiveMap(initialdata, function() {
    // Long-running or computationally intense code here
    return result;
});

原本会阻止整个 UI 的代码现在似乎在后台运行（尽管本质上这是一种错觉，就像在旧应用程序中定期调用 Application.DoEvents）。好用又通用，只要长时间运行的代码有利于循环 map() 式的操作！

于 2013-06-25T20:27:46.230 回答