如何在Angularjs上使用setInterval

时间:2013-10-07 12:40:47

标签: angularjs

我正在编写一个小测验应用程序,我需要向用户显示计时器所用的时间。我没有看到setInterval()的任何包装器。使用window.setInterval看起来很尴尬。是否有一种干净的Angular方式来更新时间?

1 个答案:

答案 0 :(得分:1)

我建议将'尴尬'代码包装在某个帮助程序模块中。请记住$apply()您的更改,以便AngularJS可以更新绑定。

// 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();