如何在Angularjs上使用setInterval [重复]

Posted 2023-02-22

【中文标题】如何在Angularjs上使用setInterval [重复]

【英文标题】：How to use setInterval on Angularjs [duplicate]

【发布时间】：2013-10-14 01:09:44

【问题描述】：

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

【问题讨论】：

几乎相同的问题，完全相同的答案：***.com/questions/14237070/…

@see siddii.github.io/angular-timer

@Philipp - 我也看到了那个帖子，但是那个解决方案看起来是反语义的。我只是想知道是否存在更好的解决方案。

不，但是您也可以在其中使用范围进行 setInerval.$apply，$timeout 只是没有 inteval 方法，只有超时。

【参考方案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();

【讨论】：

我想过这个，但这看起来仍然很乱。顺便说一句，您需要确保在视图被销毁时调用 cancelInterval()。否则，即使您移出此范围，此方法仍会继续执行。

使用 $interval（检查文档）而不是 setInterval