Angular JS Number Counter

Question

I am trying to make a custom directive to count up from 0 to X. I have it successfully working however i cant seem to figure out how to improve the count. the problem I'm facing is that the end numbers is a 7/8 digit number and counting up by 1 is not really working for obvious reasons.

It is three separate counters that each one will have a different end number which is hard coded for now.

    .directive('cuImpactCounter', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        replace: false,
        scope: {},
        template: '<div class="row">' +
                    '<div class="col d-flex text-center flex-column">' +
                        '<div><p>Test 1</p></div>' +
                        '<div><p>{{ interestSavedMillis }}</p></div>' +
                    '</div>' +
                    '<div class="col d-flex text-center flex-column">' +
                        '<div><p>Test 2</p></div>' +
                        '<div><p>{{ interestEarnedMillis }}</p></div>' +
                    '</div>' +
                    '<div class="col d-flex text-center flex-column">' +
                        '<div><p>Test 3</p></div>' +
                        '<div><p>{{ savingsEarnedMillis }}</p></div>' +
                    '</div>' +
                '</div>',
        controller: ['$scope', function ($scope) {

            $scope.interestSavedMillis = 0;
            var interestSaved = 15016400;
            var i = 0;
            function interestSavedTimeLoop() {
                setTimeout(function() {
                    $scope.interestSavedMillis++;
                    $scope.$digest();
                    i++;
                    if (i < interestSaved) {
                        interestSavedTimeLoop();
                    }
                }, 1);
            }
            interestSavedTimeLoop();

            // 
            $scope.interestEarnedMillis = 0;
            var interestEarned = 12367690;
            var x = 0;
            function interestEarnedTimeLoop() {
                setTimeout(function () {
                    $scope.interestEarnedMillis++;
                    $scope.$digest();
                    x++;
                    if (x < interestEarned) {
                        interestEarnedTimeLoop();
                    }
                }, 1);
            }
            interestEarnedTimeLoop();

            $scope.savingsEarnedMillis = 0;
            var savingsEarned = 34819566;
            var y = 0;
            function savingsEarnedTimeLoop() {
                setTimeout(function () {
                    $scope.savingsEarnedMillis++;
                    $scope.$digest();
                    y++;
                    if (y < savingsEarned) {
                        savingsEarnedTimeLoop();
                    }
                }, 1);
            }
            savingsEarnedTimeLoop();

        }]
    }
}])

What issue your facing. The counter is working fine but is it slow or what? — Ashish
– Ashish, Commented Nov 5, 2019 at 18:17
@Ashish Yeah to count up by 1's and get to 10,000,000 is taking WAYYYY to long. how can i speed this up? thats where im struggling because its never a nice rounded number its more like 15,672,839. — Charles L.
– Charles L., Commented Nov 5, 2019 at 18:19
Are you okay with increasing the counter my some exponential number? Or you need to increase it by 1 only? — Ashish
– Ashish, Commented Nov 5, 2019 at 18:24
@Ashish i have no problem increasing by some exponential number — Charles L.
– Charles L., Commented Nov 5, 2019 at 18:25

Kalesh Kaladharan · Accepted Answer · 2019-11-05 18:38:38Z

For someting like this I would definitely go the opposite way. I will decide on how long the loop should run to reach the final count. Say I want to reach 5,000,000 in 10 seconds. That's 10,000 milliseconds and let's decide we will loop every 10 milliseconds. That gives us the loop count to be 1000.

So we now have 1000 loops to reach 5 million ie, add 5000 on each loop.

let counter = 0;
setTimeout(function() {
   counter +=5000; 

   if(counter > interestSaved) 
       counter = interestSaved;

   $scope.interestSavedMillis = counter;
   $scope.$digest();

   if (counter < interestSaved) {
      interestSavedTimeLoop();
   }
}, 10); //10 millisecond loop

Obviously, this will make the counter look artificial. So you can replace the increment value to something that is not power of 10. The basic idea is to have the counter stop after particular time.

You can also add a speed factor into the equation, so that 10 milliona and 5 million don't end at same time.

I hope you got the idea.

Collectives™ on Stack Overflow

Angular JS Number Counter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related