Random Interval - Angular

by Douglas Ludlow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-app="IntervalExample">
<div ng-controller="IntervalCtrl as vm">
<div class="container">
    <div class="form-group">
    <span class="badge badge-{{vm.class}}">
        {{vm.count}}
    </span>
    <span ng-show="vm.animating" class="badge badge-success">Going</span>
    <span ng-hide="vm.animating" class="badge badge-danger">Stopped</span> 
    </div>
    <div class="form-group">
        <input type="text" class="form-control" ng-focus="vm.animating = false" />
    </div>
    <button class="btn btn-default" ng-click="vm.loop()">
        <span ng-show="vm.animating">Stop</span>
        <span ng-hide="vm.animating">Start</span> 
    </button>
 </div>
</div>
</div>

CSS

.container {
    padding-top: 15px;
}

.btn {
    width: 56px;
}

.badge {
    transition: background-color 1.5s;
}

.badge.badge-default {
    background-color: #777777;
}

.badge.badge-primary {
    background-color: #286090;
}

.badge.badge-success {
    background-color: #5CB85C;
}

.badge.badge-info {
    background-color: #5BC0DE;
}

.badge.badge-warning {
    background-color: #F0AD4E;
}

.badge.badge-danger {
    background-color: #D9534F;
}

JavaScript

(function() {
    'use strict';
    
    angular
        .module('IntervalExample', [])
        .controller('IntervalCtrl', IntervalCtrl);

    IntervalCtrl.$inject = ['$timeout'];
    function IntervalCtrl($timeout) {
        var vm = this,
            classes = ['default', 'primary', 'success', 'info', 'warning', 'error'];
    
        vm.animating = true;
        vm.count = 0;
        vm.loop = function() {
            vm.animating = !vm.animating;
            loop();
        };
        
        loop(); 
        
        function loop() {
            var delay = 500;//random(1000, 3000);
            var t = $timeout(function() {
                if (vm.animating) {
                    doStuff();
                    loop();
                } else {
                    $timeout.cancel(t);
                }
            }, delay);
        }
        
        function doStuff() {
            vm.count++;
            vm.class = classes[random(0, classes.length)];
        }
        
        function random(min, max){
            return Math.floor(Math.random() * (max - min)) + min;
        }
    }
})();