1

我正在尝试取消 ionic2 上的主页选项卡上的一个 observable，这可能是那里的一个错误，因为现在 6 小时后没有任何效果。

我正在使用的可观察示例来自此站点 https://coryrylan.com/blog/intro-to-rxjs-observables-and-angular-2

我试过 ngZone，你不能从 ngZone 清除间隔，

我试过了

 ionViewWillLeave() {
      this.disposable.dispose();
      clearInterval(this.home_game_timer);

  }

没有任何效果..这是代码...此代码在主页选项卡上

getGame(){

var link = 'https://gamerholic.com/******';
var data_post = JSON.stringify({game:this.game,uid:this.data.uid,device:this.device_id,session:this.session});
let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
let options       = new RequestOptions({ headers: headers }); // Create a request option

return this.http.post(link, data_post, options) // ...using post request
.map(data => data.json())
.catch(this.handleError)
.subscribe((data) =>{
  this.game_data = data

  if(this.game_data.success){
    this.game = this.game_data.games[0].id,
    this.game_data = this.game_data.games[0]
        this.gameStream$ = new Observable(observer=>{
          this.home_game_timer = setInterval(()=>{

              if(this.gone<1){
                var link = 'https://gamerholic.com/****';
                var data = JSON.stringify({game:this.game,uid:this.uid});
                let headers = new Headers({ 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8' });
                let options = new RequestOptions({ headers: headers });
                return this.http.post(link, data,options)
                .map(data => data.json())
                .catch(this.handleError)
                .subscribe((data) =>{
                  var d = data
                  observer.next(d)
                })
              }

            },1000)

            return(()=>{
              clearInterval(this.home_game_timer);
            })
        })

        this.disposable = this.gameStream$.subscribe((data)=>{
        this.timer_data = data
        this.list_players = data
        console.log(this.timer_data)
      })

      }
  })

 }
4

2 回答 2

0

如果你想取消一个 observable，你需要取消订阅它。您正在做的是创建一个具有一些拆卸逻辑的可观察对象。到目前为止，一切都很好。

return(()=>{
          clearInterval(this.home_game_timer);
        })

但是，在您明确取消订阅 observable 之前，不会执行此拆解逻辑片段。所以你设置了一个 clearInterval，但是这个方法永远不会被调用，因为 observable 永远不会被取消订阅。你应该做的实际上是在某个时候取消订阅。

this.disposable = this.gameStream$.subscribe((data)=>{
    this.timer_data = data
    this.list_players = data
    console.log(this.timer_data)
  })

this.disposable.unsubscribe(); // ==> this will trigger the teardown logic to be called

您可以调用它的地方可能因您的需要而异。什么时候需要调用它？如果它在您的组件的销毁时间，您可以使用销毁生命周期挂钩。

于 2016-10-19T05:21:33.427 回答
0

我发现的解决方法是在主页选项卡上设置页面视图的本地存储

this.page_view      = 'global'
localStorage.setItem('page_view','global')

我将页面视图传递给服务

this.globalService$.timer(this.page_view,this.device_id,this.game,this.uid)
.map(data => data.json())
.catch(this.handleError)
.subscribe(
       (data) =>{
         this.game_data = data
       })

从服务中，我将传递的页面视图与本地存储页面视图匹配

timer(page_view,device_id,game,uid){

let pv =  localStorage.getItem('page_view')
if(page_view==pv){

  var link = 'https://gamerholic.com/****';
  var data_post = JSON.stringify({game:game,uid:uid,device:device_id});
  let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
  let options       = new RequestOptions({ headers: headers }); // Create a request option
  return this.http.post(link, data_post, options) // ...using post request

  }
 }

现在计时器仅在页面浏览量匹配时运行...

于 2016-10-19T13:59:40.637 回答