When and why use a tick in Angular 2?

Question

I saw that the following is used in the Angular 2 component class:

setTimeout(()=>{}, 0); 

This means that after 0 seconds an empty function is called. I know this is related to the Javascript event model, but I don't understand it completely.

Please explain when and why this is done in Angular 2 using a small real world example with some code snippet .

Answer 1

 setTimeout(()=>{}, 0); 

Causes Angular to trigger change detection for the entire application, such as ApplicationRef.tick

zone.js patches the asynchronous APIs ( addEventHandler , setTimeout , ...) and triggers change detection after the callback completes.

Answer 2

I will add Gunther's answer, as it is still small.

He says:

setTimeout(()=>{}, 0); Causes Angular to trigger change detection for the entire application.

This is because the setTimeout been fixed to be intercepted by the corner, which when intercepted triggers change detection. In other words, every time setTimeout is called, a change detection is made.

it can be done like this:

 const temp = window.setTimeout; window.setTimeout = (...args) => { temp(...args) angular.triggerChangeDetection(); // or we they use } 

Thus, 0 means that change detection occurs immediately, and an empty function - because we do not want to do anything.

Answer 3

I remember asking this question for quite some time. The answer, which was in the github repository called angular-flexslider, was that it replaced the $(document).ready(function() {...})) component level.

Angular manipulates the DOM after the page loads. Sometimes you can see the update of angular expressions after loading pages, when the processor is a little busy. The timeout function ensures that the code runs zero milliseconds after angular completes processing the document.

I never had to do this, and these days with the component lifecycle hooks, I can't imagine what you will ever need again (that is, if you really ever needed it). But in English terms I saw this reason. I can also say that I saw a lot of Angular code written by engineers that you would be very sure of (as far as they know Angular), and never saw anyone do this.

It is also a way to make sure that the code you want to run is placed at the end of the current event loop queue. This is often done for performance. I used to do something like the following for "infinite scroll" lists (now it's all RxJS, Observables, etc.). Consider this code:

 var res = [] function response ( d ) { var chunk = data.splice ( 0, 1000 ); res = res.concat ( chunk.map ( ...do something ) ); if ( data.length > 0 ) { setTimeout ( () => { response ( data ) }, 0 ); } } 

Since you recursively call response via setTimeout to process chunks, even if it has an interval of 0, you do this in batches, and each of these batches will be processed at the end of the current job queue (instead of just creating an event stack in the event queue that will be blocked) .