加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

异步 – Angular2 – 在路由更改时停止’setInterval’http请求

发布时间:2020-12-17 17:39:31 所属栏目:安全 来源:网络整理
导读:我正在使用Angular2编写实时更新图.我的图表正在通过http observable和setInterval命令进行更新. 我注意到的一个奇怪的事情是,当我通过angular路由到我的app上的不同视图时,前一个组件上的setInterval命令不会停止,从而导致服务器进行不必要的加载. 在Angula
我正在使用Angular2编写实时更新图.我的图表正在通过http observable和setInterval命令进行更新.

我注意到的一个奇怪的事情是,当我通过angular路由到我的app上的不同视图时,前一个组件上的setInterval命令不会停止,从而导致服务器进行不必要的加载.

在Angular2中对路由更改停止setInterval http请求的正确方法是什么?

任何帮助将不胜感激.

解决方法

Events are managed very differently by browsers,基本上它们是由Event循环处理的.

The browser has inner loop,called Event Loop,which checks the queue
and processes events,executes functions etc.

因此,每当您添加任何异步事件(如setTimeout / setInterval)时,它们都会使用其处理程序添加到Event Loop.

基本上每当您想要停止/取消注册这些异步事件时,您需要手动取消注册它们.就像在这里你需要使用setInterval对象引用调用clearInterval方法,然后它只会从Event Loop中删除该异步事件.

您可以使用ngOnDestroy生命周期钩子,在破坏组件之前可以使用你的东西.

//hook gets called before Component get destroyed or you can say disposed.
ngOnDestroy(){
    clearInterval(intervalReference)
}

额外的东西(与Angular 1比较)

您可以在任何Javascript框架中看到同样的问题.在Angular 1中,有办法处理这种情况(我正在添加这些东西,以便任何来自Angular 1背景的人都可以通过比较A1和A2来轻松获得这个概念).在内部销毁控制器实例的角度时,会在元素和放大器上发出$destroy事件. $元素的范围.因此,通过监听$destroy事件,我们过去常做的事情是确保那些对象值/对象/事件不可用.

$scope.$on('$destroy',function(event){
   //do stuff here
})

element.bind('$destroy',function(event){
   //do stuff here
})

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读