javascript - AngularJS promise 挂起 UI

Question

即使我使用 promise 来运行计算，我的应用程序也会挂起。

我正在用 Angular 编写一个小 BlackJack 游戏。在这个游戏中，我想在我的游戏板底部显示纸牌的排列。当我不调用计算排列的 getData() 方法(见下文)时，我的游戏板呈现速度很快。但是当我调用 getData() 时，我的 UI 挂起了。

我声明并返回 promise 的服务如下所示:

app.service('cardService', ['$q', 'myservice', 'calculation', function ($q,  myservice, calculation) {
    return {
        getData: function () {
            var defer = $q.defer();

            myservice.setup_deck();
            var cards = myservice.get_needed_cards(myservice.player_hand, myservice.static_deck);

            // This is calculation-intensive
            var dh_grouped = calculation.step1(cards);
            var result = calculation.step2(dh_grouped);

            defer.resolve(result);

            return defer.promise;
        }
    };

}]);

现在，我以一种非常原始的方式调用 promise :

// controller.js
$scope.display_calculations = function () {

    cardService.getData().then(function(result){
        $scope.calcs = result;
        console.log('calculations successful'); 
    });
    console.log('this message shows before the one above');
};   

// The relevant HTML
<td ng-repeat="c in calcs">{{c.result}}</td>

为了调试，我删除了语句 $scope.calcs = result 以查看删除它们是否会阻止我的 UI 挂起:

cardService.getData().then(function(result){
    console.log('calculations successful'); 
}); 

上述方法无效。我的 UI 仍然挂起!防止 UI 挂起的唯一方法是不调用 getData()。

我如何使用 Angular 才能避免昂贵的操作挂起 UI？

附言我使用的是 Angular 1.2.21，甚至尝试使用 1.5.x，但这也不起作用。

Answer 1

您可能会混淆 promise 和线程。 promise 不支持并发执行。如果您需要在保持 UI 响应的同时在 JavaScript 中执行 CPU 密集型任务，您必须:

• > spawn a WebWorker (浏览器)
• > spawn a process (节点.js)
• 找到一种方法将计算分成小块并逐 block 运行(这样 UI 就可以在每个 block 之间响应用户)