即使我使用 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/