Question

我正在使用AngularJS开发Web应用程序。我的控制器对使用AJAX检索的数据执行一些CPU密集型任务，并且它对单个视图执行了多次。问题是控制器倾向于冻结UI，包括我显示的微调器，直到一切都完成。

我知道在AngularJS中使用setTimeout或$ timeout的技巧可以让UI赶上但是当CPU最大化时似乎不能正常工作。我确信问题不在于AngularJS实现，因为我尝试用jQuery和普通的旧Javascript做类似的事情。

我有一个人为的JSFiddle来演示我遇到的那些问题

function MyCtrl($q, $timeout, $scope, $http) {
    var doSomething = function (i) {
        var def = $q.defer();
        doSomethingElse(i).then(function (y) {
            for(var m = 0; m < 500; m++) {
                $timeout(function () {
                    for(var n = 0; n < 1000000; n++) {
                        var o = 500000000 + n + m * 1000000;
                        var p = o * o * o;
                    }
                }, 20);
            }
            def.resolve(y);
        });
        return def.promise;
    }
    var doSomethingElse = function (i) {
        var def = $q.defer();
        $http.post('/echo/html/', $.param({
            html: "Task #" + i + " complete.",
            delay: 5 - i
        })).then(function (x) {
            def.resolve(x.data);
        });
        return def.promise;
    }
    $scope.results = [];
    for(var i = 1; i <= 5; i++) {
        doSomething(i).then(function (z) {
            $scope.results.push(z);
        });
    }
}

希望有人可以告诉我一个更好的方法来做到这一点。

在执行CPU密集型javascript期间更新UI的问题

0 个答案: