my app hangs though using promise run calculations.
i'm writing little blackjack game in angular. in game, want display permutations of cards @ bottom of game board. game board renders fast when don't call getdata() method (see below) calculates permutations. when call getdata() ui hangs.
the service declare , return promise looks this:
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); // calculation-intensive var dh_grouped = calculation.step1(cards); var result = calculation.step2(dh_grouped); defer.resolve(result); return defer.promise; } }; }]); now, call promise in vanilla way this:
// controller.js $scope.display_calculations = function () { cardservice.getdata().then(function(result){ $scope.calcs = result; console.log('calculations successful'); }); console.log('this message shows before 1 above'); }; // relevant html <td ng-repeat="c in calcs">{{c.result}}</td> to debug, removed statement $scope.calcs = result see if removing them stop ui hanging:
cardservice.getdata().then(function(result){ console.log('calculations successful'); }); the above did not work. ui still hangs! way prevent ui hanging not calling getdata().
how can use angular expensive operations don't hang ui?
p.s. using angular 1.2.21 , tried using 1.5.x did not work either.
use $timeout
app.service('cardservice', ['$q', '$timeout', 'myservice', 'calculation', function ($q, $timeout, myservice, calculation) { return { getdata: function () { return $timeout(function() { myservice.setup_deck(); var cards = myservice.get_needed_cards(myservice.player_hand, myservice.static_deck); // calculation-intensive var dh_grouped = calculation.step1(cards); return calculation.step2(dh_grouped); }, 1); } }; }]); this defer execution , let ui load first. $timeout returns promise rest of code can stay same.
Comments
Post a Comment