[JavaScript知识库]@angular/core里的 NgZone -使得Angular不跟踪变化

前言：
在模板中实时获取一个变量，模板中就频繁的更新显示，频繁的变动将造成性能损耗。
或者在双向绑定时，异步事件的发生会导致组件中的数据变化，但是你想要适当时机再改变模板显示。

一、NgZone

Angular为我们提供了NgZone服务，对于一些频繁的操作，可以不去触发变更检测。
Angular环境内注册的异步事件都运行在这个NgZone上

原理：

参考：https://www.jianshu.com/p/4d84208d9310
NgZone是基于Zone来实现的，NgZone从Zone中fork了一份实例,是Zone派生出的一个子Zone,在Angular环境内注册的异步事件都运行在这个子Zone上.

Zone.js 如何工作?

Zone.js 对所有常见的异步 API（setTimeout, setInterval 和 Promise）打上了“补丁” 以追踪所有的异步操作。
Zone 是一种用于拦截和跟踪异步工作的机制。
Zone.js 将会对每一个异步操作创建一个 task。一个 task 运行于一个 Zone 中。

NgZone：通常来说， 在 Angular APP 中，每个 task 都会在 “Angular” Zone 中运行，这个 Zone 被称为 NgZone。一个 Angular APP 中只存在一个 Angular Zone，而变更检测只会由 运行于这个 NgZone 中的异步操作触发。

方法：

runOutsideAngular(): 使你的上下文中的异步任务不会触发Angular跟踪变化。
run(): 如果你想继续跟踪变化，使用run()方法即可让Angular重新跟踪变化。

<p (click)="change()">counter:{{counter}}</p>

//在组件中引入NgZone
import { NgZone } from '@angular/core';

@Injectable()
export class AuthService {
  //将其注入constructor里
  constructor(private _ngZone: NgZone) {}
  
  public change():void{
  	//调用runOutsideAngular方法，Angular不会对里面的异步操作变化进行跟踪。
  	this._ngZone.runOutsideAngular(() => {
  	 	 for (let i = 0; i < 10; i++) {
  	 	 	//对里面的同步任务还是会变化进行跟踪的， 页面显示上counter会变动; 
  	 	 	//this.counter = 30

			//对里面的异步操作变化不会进行跟踪
	        setTimeout(() => {
	        	//angular不会对这里的变化进行跟踪
		         this.counter++;
		         if(i==9){
		           //如果注释这块点击后页面counter不会变动；如果此时又想让angular跟踪counter的变化，直接调用NgZone的run方法
		            this._ngZone.run(() => {console.log('Outside Done!') });
		         }
	        }, 10);
         }
	});
  }
}