How to use setInterval on Angularjs

Question

I'm writing a small quiz application where I need to display a timer the elapsed time to the user. I don't see any wrapper for the setInterval(). using window.setInterval looks awkward. Is there a clean Angular way of updating the time?

Answer 1

I would suggest to wrap the 'awkward' code in some helper module. Remember to $apply() your changes so AngularJS can update the bindings.

// helper code
    var applyIfPossible = function (scope, fn) {
        if (!scope.$root.$$phase) {
            scope.$apply(function () {
                fn();
            });
        } else {
            fn();
        }
    };

    function setupInterval(scope, timeSpanInMilliseconds) {
        var intervalHandler = window.setInterval(function(){
            applyIfPossible(scope, intervalCallbackFn);
        }, timeSpanInMilliseconds);

        var unregisterDestroyHandler = null;
        unregisterDestroyHandler = scope.$on('$destroy', ()=> {
            window.clearInterval(intervalHandler);
            unregisterDestroyHandler();
        });

        scope = null;

        return function clearInterval() {
            unregisterDestroyHandler();
            window.clearInterval(intervalHandler);
        }
    }



// app code
var stopInterval = setupInterval(scope, 200, update); // update does you repeated stuff

// later on
stopInterval();