javascript - Angular2 setinterval 在 dom 更改时被阻止

Question

我有一个基本的 Javascript/JQuery 应用程序，现在我正在将其迁移到 Angular2，并使用 Material.angular.io 作为我的 UI。

在旧版本中，当我使用“setInterval(func,200);”时要每 200 毫秒查询一次服务器，它就会每 200 毫秒调用一次，即使使用 JQuery 的append(content) 或 html(content) 函数添加 DOM 元素也是如此。

现在在 Angular2 中，虽然 DOM 使用 *ngFor 进行更改并且更改很大(从服务器获取约 200 行并将它们显示为具有切换按钮等 Material 组件的表行)，但所有内容都会卡住大约 1 秒。服务器日志显示，调用确实停止了大约 1 秒，然后每 200 毫秒再次恢复一次。 但是当我以较小的组添加 DOM 元素时(即每 200 毫秒 10 个项目)，那么一切都很好。

当我使用 F11 切换全屏时，当浏览器重新绘制布局以匹配新的窗口大小时，也会发生这种情况。

使用 Chrome 的调试控制台，我可以看到“Timer Fired(zone.js:2087)”显示为“Recurring handler take 731.18 ms”警告。我不确定问题是因为我的代码还是因为material.io问题，但我认为Angular的setInterval与普通的JavaScript setInterval不同？

相关代码如下:

<tbody>
  <tr *ngFor="let io of inputs; trackBy: trackByFn">
    <td>{{io.id}}</td>
    <td>{{io.name}}</td>
    <td>{{io.description}}</td>
    <td><mat-slide-toggle>Test</mat-slide-toggle></td>
    <td>{{io.device}}</td>
  </tr>
</tbody>

来自服务器的日志显示上次查询的时间:

15:40:25.229 stat.service.ts:108 200
15:40:25.430 stat.service.ts:108 201
15:40:25.630 stat.service.ts:108 201
15:40:25.831 stat.service.ts:108 201
15:40:26.031 stat.service.ts:108 200
15:40:26.235 stat.service.ts:108 203
15:40:26.435 stat.service.ts:108 201
15:40:26.636 stat.service.ts:108 201
15:40:26.838 stat.service.ts:108 202
15:40:27.039 stat.service.ts:108 201
15:40:27.895 stat.service.ts:108 856 // WHEN THE COMPONENT LOADS
15:40:28.200 stat.service.ts:108 305
15:40:28.442 stat.service.ts:108 242
15:40:28.679 stat.service.ts:108 237
15:40:28.901 stat.service.ts:108 221
15:40:29.131 stat.service.ts:108 231
15:40:29.363 stat.service.ts:108 231

Answer 1

也许这就是 Angular 中 ChangeDetection 的问题。当您更改对象时，它会渲染整个对象。尝试在您的组件中实现 ChangeDetectionStrategy 并查看是否有任何改进。您的组件代码将如下所示:

@Component({
  selector: "your-comp",
  templateUrl: "./your.component.html",
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent{
  constructor(private cdr: ChangeDetectorRef) {}

 // this.cdr.markForCheck(); use code for change on DOM when you get data in observable
}

希望对你有帮助