Ionic 2 视图更新变慢

Question

我正在使用 Ionic 2 构建一个包含计时器的应用程序。 当计时器启动时，一切都很好，并且更新是即时的。但是，在 Ionic View 中，视图更新变得越来越慢。超时设置为 32 毫秒，但在计时器运行 3 分钟后，更新时间大约为 1 秒。我还通过将其作为 Android 应用程序运行来进行测试。更新也变得越来越慢，但不像 Ionic View 那样慢。奇怪的是，当我触摸屏幕时，更新又是即时的，直到我发布它。

我该如何解决这个问题？

我用

启动计时器

this.timer = setInterval(self.getUpdate(self), 32);

getUpdate 函数

getUpdate(self) {
    return () => {
        self.lapTime = TimerPage.formatTime(new Date().getTime() - self.startTime);
        self.cd.markForCheck();
    };
}

在视图中我只是用它来显示时间

<div>{{lapTime}}</div>

Answer 1

目前尚不清楚是什么造成了麻烦，并且在 5 小时内没有人提出任何建议。

可能原因：

Angular 使用 zone.js 表示change detection

跟踪所有Asynchronous 事件并提供挂钩

Angular 使用这些钩子来Re-render 视图。

如果每隔32ms 触发一次，可能会有点重

Solution:

在 Angular 的 Github 帐户上提交问题

像这样在zone.js 的范围之外运行您的setInterval

import {Component, NgZone} from 'angular2/core';

@Component({})
export class YourClass{
  constructor(public zone:NgZone){}

  setSetInterval(self){ //just a random, normal function

    this.zone.runOutsideAngular(
      //anything done here won't trigger a change detection

      this.timer = setInterval(self.getUpdate(self), 32); 
    )
  }

  getUpdate(self){
    this.zone.run(
      //to reenter the angular's parent zone and trigger a change detection

      //put your functions functionality in here
    )
  }

}