backburner.js 
A rewrite of the Ember.js run loop as a generic microlibrary.
TL;DR
A priority queue that will efficiently batch, order, reorder and process work; done via scheduling work on specific queues.
API
Constructor
| Constructor | Description |
|---|---|
new Backburner() | instantiate a Backburner instance with an array of queue names |
Instance methods
| Method | Description |
|---|---|
Backburner#run | execute the passed function and flush any deferred actions |
Backburner#defer | defer the passed function to run inside the specified queue |
Backburner#deferOnce | defer the passed function to run inside the specified queue, only execute it once |
Backburner#setTimeout | execute the passed function in a specified amount of time |
Backburner#debounce | execute the passed function in a specified amount of time, reset timer upon additional calls |
Backburner#throttle | rate-limit the passed function for a specified amount of time |
Backburner#cancel | cancel a deferOnce, setTimeout, debounce or throttle |
Backburner#on | Add an event callback. Supports the following events:
|
Backburner#off | Removes an event callback |
Backburner#join | Join the passed method with an existing queue and execute immediately, if there isn't one use Backburner#run |
Backburner#getDebugInfo | Returns debug information for counters, timers and queues, which includes surfacing the stack trace information for the respective calls |
Alias
| Alias | Description |
|---|---|
Backburner#schedule | same as defer |
Backburner#scheduleOnce | same as deferOnce |
Backburner#later | same as setTimeout |
Example usage
The following code will only cause a single DOM manipulation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Backburner demo</title>
</head>
<body>
<div id="name"></div>
<script type="module">
import Backburner from './dist/es6/backburner.js'
var backburner = new Backburner(['render']),
person = {name: 'Erik'};
function updateName() {
document.querySelector('#name').innerHTML = person.name;
}
function setName(name) {
person.name = name;
backburner.deferOnce('render', updateName);
}
backburner.run(function() {
setName('Kris');
setName('Tom');
setName('Yehuda');
});
</script>
</body>
</html>
Benchmarks
The /bench directory includes a number of performance benchmarks.
To run in node:
yarn ember build
node ./bench/index.js # (all benchmarks)
node ./bench/index.js ./bench/benches/some-file.js # (specific benchmark)
Or to run in a browser, run yarn ember server, and visit http://localhost:4200 in a browser. Be aware that having the developer tools open/closed can affect JS performance.