Angular rxjs Observable.interval() 无法在 Chrome 的后台选项卡上正确触发

Dus*_*san 7 timer observable rxjs angular2-observables angular

我正在编写带有通过 RxJs observables 实现的间隔计时器的 angular2 应用程序,并且刚刚注意到当选项卡处于后台时 Chrome 浏览器中 Observable.interval() 和 Observable.timer() 的奇怪行为。Angular 组件应该每秒在控制台中打印一次秒数,但在后台选项卡上,这无法按预期工作 - 函数每 x+1 秒触发一次,其中 x 是间隔函数中明确指定的间隔

角度组件代码:

ngOnInit() {
  let a = Observable.interval(1000).subscribe(() => {
    let date = new Date();
    console.log(date.getSeconds());
  });
}
Run Code Online (Sandbox Code Playgroud)

示例:tab1 上的控制台输出(带有上面定义的计时器的选项卡):

37 <- tab1 (with timer)
38
39
40
41 <- changed tab to tab2
43
45
47
49
51
53
55
57
59 <- changed tab to tab1
0
1
2
3
Run Code Online (Sandbox Code Playgroud)

Mozzila FF 没有问题。

我认为这种行为是浏览器中后台选项卡优先级较低的结果,但为什么间隔总是推迟一秒?

Dus*_*san 4

不过如果setInterval()使用的话,在任何浏览器上都没有问题。

ngOnInit() {

  setInterval(()=>{

    console.log(new Date())
  },1000)  
}
Run Code Online (Sandbox Code Playgroud)

  • 当然这是一个很好的解决方法,但仍然没有解释为什么可观察量表现得很奇怪:D (3认同)