A rewrite of the Ember.js run loop as a generic microlibrary.
new Backburner() - instantiate a Backburner instance with an array of queue names
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
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 src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="backburner.js"></script>
<script>
var backburner = new Backburner(['render']),
person = {name: "Erik"};
function updateName() {
$('#name').text(person.name);
}
function setName(name) {
person.name = name;
backburner.deferOnce('render', updateName);
}
backburner.run(function() {
setName("Kris");
setName("Tom");
setName("Yehuda");
});
</script>
</body>
</html>app.TodoView = Backbone.View.extend({
// ...
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
// put the rerender on the backburner!
backburner.deferOnce('render', this, this.actuallyRender);
},
actuallyRender: function() {
// do our DOM manipulations here. will only be called once.
}
// ...
});
// ... somewhere in our app code ...
backburner.run(function() {
model.set('firstName', 'Erik');
model.set('lastName', 'Bryn');
});
// our view has been rerendered only once, thanks to backburner!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent