Javascript number generator lagging. What is causing the lag?

Question

I have to preface I don't know a lot about Javascript so I built this by forking a Pen. I tried to find similar posts here, but the other posts mentioning lag didn't seem to align with my dilemma. It was lagging when I only had the one number, so I don't know if the second script had any effect on it. Here is all the code. Sometimes it gets stuck longer than the time placed in the Javascript. I want it to be consistently 1 second for the first number and 2 seconds for the second number.

var app = angular.module('myApp', []);

app.controller('MyRngCtrl', function($scope, $timeout) {
  $scope.rngESUS = 0;
  (function update() {
    $timeout(update, 1000 * 1);
    $scope.rngESUS = Math.round((Math.random() * 5) + 1);
  }());
});


app.controller('MyRngCtrl2', function($scope, $timeout) {
  $scope.rngESUS2 = 0;
  (function update() {
    $timeout(update, 1000 * 2);
    $scope.rngESUS2 = Math.round((Math.random() * 5) + 1);
  }());
});

.number {
  font-size: 25px;
  font-weight: 800;
  font-family: arial, sans-serif;
  text-align: center;
  color: red;
}

h4 {
  font-size: 20px;
  font-family: arial, sans-serif;
  text-align: center;
  margin: 1rem 0 0.5rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="myApp">

  <h4>ONE SECOND PUNCH</h4>
  <div class="number" ng-controller="MyRngCtrl">
    {{rngESUS}}
  </div>

  <h4>TWO SECOND PUNCH </h4>
  <div class="number" ng-controller="MyRngCtrl2">
    {{rngESUS2}}
  </div>

</body>

@DanielA.White - I had to google that. Is there a solution or a different js I can replace it with? I found a directive but am not sure I understand it. — Dismantle, Aug 15 '23 at 13:46
Are you sure it's lagging and not just generating the same number on repeat? `3, 3, 3, 3, 3` is still random — xdumaine, Aug 15 '23 at 13:50
[Run this for each n digits you want](https://stackoverflow.com/questions/15585216/how-to-randomly-generate-numbers-without-repetition-in-javascript) — mplungjan, Aug 15 '23 at 13:52
You have to add a lot of detail here. What is "lag" in this case? How does it manifest? For how long? What have you tried to prove to yourself that it's lagging? Have you tried emitting `console.log` messages, or displaying sequential numbers instead of random, so you can tell when the numbers are changing reliably? — user229044, Aug 15 '23 at 14:06

Mr. Polywhirl · Accepted Answer · 2023-08-15T14:02:54.613

Why don't you use the $interval service instead?

Also, I created a nextRand function to ensure that the next random number is not the same as the previous. This demonstrates that the interval is running without issue.

var app = angular.module('myApp', []);

function randRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function nextRand(curr) {
  let next;
  do { next = randRange(1, 6); }
  while (next === curr);
  return next;
}

app.controller('MyRngCtrl', function($scope, $interval) {
  $scope.rngESUS = 0;
  $interval(function () {
    $scope.rngESUS = nextRand($scope.rngESUS);
  }, 1000);
});


app.controller('MyRngCtrl2', function($scope, $interval) {
  $scope.rngESUS2 = 0;
  $interval(function () {
    $scope.rngESUS2 = nextRand($scope.rngESUS2);
  }, 2000);
});

.number {
  font-size: 25px;
  font-weight: 800;
  font-family: arial, sans-serif;
  text-align: center;
  color: red;
}

h4 {
  font-size: 20px;
  font-family: arial, sans-serif;
  text-align: center;
  margin: 1rem 0 0.5rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="myApp">

  <h4>ONE SECOND PUNCH</h4>
  <div class="number" ng-controller="MyRngCtrl">
    {{rngESUS}}
  </div>

  <h4>TWO SECOND PUNCH </h4>
  <div class="number" ng-controller="MyRngCtrl2">
    {{rngESUS2}}
  </div>

</body>

that works even better. Thank you – Dismantle Aug 15 '23 at 14:09 — Dismantle, Aug 15 '23 at 14:09

Javascript number generator lagging. What is causing the lag?

1 Answers1