setTimeout function callbacks and when manually running async calls to the API.
How Ember run loop works
If you’ve read any of the productivity books out there, they all state that batching similar jobs is the key to success. Ember run loop works in a similar way. By running same or similar jobs at the same time, the browser doesn’t have to skip around from task to task, which eases the burden on it, and if you change the same property a couple of times in the same loop cycle, it will only have to process the last change.
Jobs or tasks are scheduled into different queues, and the queues are processed by priority until they are empty.
Ember run loop consists of six queues
Each one of these queues is responsible for some jobs batch that runs inside of it.
synccontains the binding synchronisation
actionsis the general work queue, and the one that generally handles promises.
routerTranisitionscontains transition jobs in the router
rendercontains the jobs that are associated with rendering the page and updating the DOM
afterRenderruns after the DOM is complete, after all the
renderjobs have been executed. This is the perfect place if you want to update the DOM after it has been rendered.
destroyis responsible for destroying everything other objects or jobs have scheduled to destroy.
Ember run loop is really important when running tests in Ember. Ember raises errors in testing mode when we try to schedule work without the run loop.
When should you use the run loop
Strictly speaking, all non Ember api code should be wrapped inside an Ember run loop. That includes:
- AJAX callbacks
- DOM updates and event callbacks
- Websocket callbacks
Be sure to wrap the callback body in the ember run loop and not the whole invocation. For example:
This fires an Ember run loop after the callback is executed, and the callback code will be executed at exactly the right moment.