What is the difference between hasPendingMacrotasks or hasPendingMicrotasks within NgZone? The documentation seems to be lacking information. All I know is that they return a boolean. But what exactly are they checking for? What is considered a micro task? And what is considered a macro task?

class NgZone {
  static isInAngularZone() : boolean
  static assertInAngularZone() : void
  static assertNotInAngularZone() : void
  constructor({enableLongStackTrace = false}: any)
  run(fn: () => any) : any
  runGuarded(fn: () => any) : any
  runOutsideAngular(fn: () => any) : any
  onUnstable : EventEmitter<any>
  onMicrotaskEmpty : EventEmitter<any>
  onStable : EventEmitter<any>
  onError : EventEmitter<any>
  isStable : boolean
  hasPendingMicrotasks : boolean
  hasPendingMacrotasks : boolean
}

My best guess is that micro refers to tasks from within a specific class whereas macro probably refers to a task in regards to the whole application. Can anyone verify or confirm this assumption? Or shed some light on the specifics?

NgZone Docs:

.html#!#hasPendingMicrotasks-anchor

What is the difference between hasPendingMacrotasks or hasPendingMicrotasks within NgZone? The documentation seems to be lacking information. All I know is that they return a boolean. But what exactly are they checking for? What is considered a micro task? And what is considered a macro task?

class NgZone {
  static isInAngularZone() : boolean
  static assertInAngularZone() : void
  static assertNotInAngularZone() : void
  constructor({enableLongStackTrace = false}: any)
  run(fn: () => any) : any
  runGuarded(fn: () => any) : any
  runOutsideAngular(fn: () => any) : any
  onUnstable : EventEmitter<any>
  onMicrotaskEmpty : EventEmitter<any>
  onStable : EventEmitter<any>
  onError : EventEmitter<any>
  isStable : boolean
  hasPendingMicrotasks : boolean
  hasPendingMacrotasks : boolean
}

My best guess is that micro refers to tasks from within a specific class whereas macro probably refers to a task in regards to the whole application. Can anyone verify or confirm this assumption? Or shed some light on the specifics?

NgZone Docs:

https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html#!#hasPendingMicrotasks-anchor

• javascript
• angular

1 Answer 1

There are three kinds of tasks

1) MicroTask:

A microtask is work which will execute as soon as possible on empty stack frame. A microtask is guaranteed to run before host environment performs rendering or I/O operations. A microtask queue must be empty before another MacroTask or EventTask runs.

i.e. Promise.then() executes in microtask

2) MacroTask

MacroTasks are interleaved with rendering and I/O operations of the host environment. They are guaranteed to run at least once or canceled (some can run repeatedly such as setInterval). Macro tasks have an implied execution order.

i.e. setTimeout, setInterval, setImmediate

3) EventTask

EventTasks are similar to macro tasks, but unlike macro tasks they may never run. When an EventTask is run, it pre-empts whatever the next task is the macro task queue. Event tasks do not create a queue.

i.e. user click, mousemove, XHR state change.

Why is it useful to know if any of the tasks are currently being performed?

• Knowing when a task has executed and a microtask queue is empty allows frameworks to know when it is time to render the UI.

• Tracking when all scheduled tasks are executed allows a test framework to know when an asynchronous test has completed.

ng_zone.ts

private checkStable() {
  if (this._nesting == 0 && !this._hasPendingMicrotasks && !this._isStable) {
    try {
      this._nesting++;
      this._onMicrotaskEmpty.emit(null);
    } finally {
      this._nesting--;
      if (!this._hasPendingMicrotasks) {
        try {
          this.runOutsideAngular(() => this._onStable.emit(null));
        } finally {
          this._isStable = true;
        }
      }
    }
  }
}

See also

• what is the use of Zone.js in Angular 2