javascript - AngularJS promise 挂起 UI

标签 javascript angularjs

即使我使用 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,但这也不起作用。

最佳答案

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

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

关于javascript - AngularJS promise 挂起 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38507733/

相关文章:

javascript - 循环通过 $id 从 Firebase 后端生成自定义的唯一页面数据

javascript - 更改 classList 会导致 Uncaught TypeError Failed to set an indexed property

javascript - 询问 ng-show/ng-hide 中的状态

angularjs - Angular + Firebase : How to quickly load lots of data?

javascript - 无法在 Vuetify v-alert close 上触发功能

javascript - 更改动态值时重复数组对象

javascript - 最小值 18 和最大值 99 带前导零的正则表达式

javascript - 带下划线或条件的下划线(下划线、lodash 或任何其他解决方案)

javascript - 获取 url 的图标并显示它 (firefox web-ext)

javascript - 如何以有效形式仅输入 3 位数字?