ember-idle-scheduler
v0.2.0
Published
The default blueprint for ember-cli addons.
Downloads
4
Readme
ember-idle-scheduler
Simple promise wrap around requestIdleCallback
and a promise (priority) queue.
--
For more complex logic consider using skyrocket (https://github.com/runspired/skyrocket) and/or igniter (https://github.com/runspired/igniter)
The problem
Simply calling requestIdleCallback
from different places in the code can cause that all these callbacks are fired within one same idle frame. This can cause jank, or delay time to interactivity. Calling requestIdleCallback
within previous requestIdleCallback
ensures that the next logic is executed in next idle frame. But this is not always feasible.
The queue
Wrapping requestIdleCallback
in a promise and adding those promises in a promise queue ensures that that different idle frame is received on each call.
Simply inject a service and add a callback to the queue.
idle: inject.service(),
_setFoo() {
this.get('idle').schedule(100).then(() => {
this.set('foo', this.get('_value'));
});
}
requestIdleCallback
can be used to delay non essential logic to lower the time to interactivity. Non essential logic can be used for firing up analytics, including external scripts (that are not being used in the current route) or loading content in advance.
In this example, google analytics script is included in first idle frame and a track request is fired in next one.
getGA(){
return this.get('idle').schedule(1000).then(() => {
return $.getScript('https://www.google-analytics.com/analytics.js');
}).then(() => {
let gaTrackingId = this.get('gaTrackingId');
window.ga('create', gaTrackingId, 'auto');
});
},
googleAnalytics: computed(function(){
return this.getGA();
}),
track(cb){
if(this.get('gaTrackingId')){
return this.get('googleAnalytics').then(() => {
return this.get('idle').schedule(1000);
}).then(cb);
}
},
trackPage(page, title){
this.track(() => {
window.ga('send', {
hitType: 'pageview',
page,
title
});
});
}
Installation
git clone <repository-url>
this repositorycd ember-idle-scheduler
npm install
Running
ember serve
- Visit your app at http://localhost:4200.
Running Tests
npm test
(Runsember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit https://ember-cli.com/.