AngularJS Stopwatch is unusably slow on mobile

Question

So I wanted to make a stopwatch app that had some extra sports tracking features built in. I'm using this angular timer library for the stopwatch (with copied-from-the-docs start and stop buttons), then adding text to a list with a button- pretty straightforward.

var app = angular.module('myTimer', ['timer'])

.controller('MainCtrl', ['$scope', function($scope){
  $scope.init = true;
  $scope.timerRunning = false;

  $scope.startTimer = function() {
    // calling init on a running timer borks it
    if ($scope.init) {
      $scope.$broadcast('timer-start');
      $scope.init = false;
    }
    else {
      $scope.$broadcast('timer-resume');
    }
    $scope.timerRunning = true;  
  };

  $scope.stopTimer = function() {
    $scope.$broadcast('timer-stop');
    $scope.timerRunning = false;
  };
}]);

Unfortunately, loading the page over localhost on mobile (iPhone 5S, iOS 8.1) works, but there's about a half second delay between pressing the start/stop button and the timer reacting- not exactly a pleasant user experience.

I also tried a jQuery implementation which ran faster, but still not as snappy as the same site on desktop (or the native timer, understandably).

So my question is this: is there any configuration of javascript I can do to make this run quickly? I haven't done any mobile app development, so completing this project web based would be ideal.

Thanks!

score 0 · Answer 1 · answered Feb 14 '15 at 02:58

0

I think your problem is not the timer, but the digest cycle for the scope is not being triggered when you change the $scope.timerRunning value. Try doing this after you change the value: $scope.$digest();

answered Feb 14 '15 at 02:58

Feras Alkhouri

359
2
10

Interesting! That would make sense, but when I add that line to my stop and start functions, I get [this](https://docs.angularjs.org/error/$rootScope/inprog?p0=$apply) error about it already being in a digest loop (and no change in speed on mobile). That makes sense, because the timer is ticking pretty quickly. Good thought though. – xavdid Feb 15 '15 at 04:02
if digest didn't work, sometimes apply would :) try this one: if(!$scope.$$phase) { $scope.$apply(); //$digest or $apply } http://stackoverflow.com/questions/12729122/prevent-error-digest-already-in-progress-when-calling-scope-apply – Feras Alkhouri Feb 15 '15 at 17:25
that correctly catches the error, but it still doesn't actually speed up the response time from touch to action. – xavdid Feb 17 '15 at 07:22

score 0 · Accepted Answer · answered Feb 17 '15 at 20:21

So it turns out that the delay in the button press wasn't caused by angular at all, but by the inherent 300 ms delay added to clicks by the mobile browser.

So, by using FastClick(and following the included instructions), the performance on mobile is as snappy as expected.

AngularJS Stopwatch is unusably slow on mobile

2 Answers2