I have limited knowledge of Javascript, so I modified this code by forking a Pen. Despite searching for similar posts, none seemed to address the issue with lag that I am experiencing. The delay occurs even when there is only one number displayed, making me question if the second script is contributing to the problem. I aim to consistently display the first number after 1 second and the second number after 2 seconds.
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>