A rewrite of the Ember.js run loop as a generic microlibrary
JavaScript HTML
Latest commit 59cfe85 Feb 7, 2017 @stefanpenner stefanpenner committed on GitHub Merge pull request #185 from alexhancock/master
[bugfix] Prevent an unhandled error from being thrown when throttle and cancelTimers were used jointly

README.md

backburner.js Build Status

A rewrite of the Ember.js run loop as a generic microlibrary.

Downloads

API

Constructor

new Backburner() - instantiate a Backburner instance with an array of queue names

Instance methods

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:

  • begin - Fires whenever the runloop begins. Callbacks are passed the current instance and the previous instance.
  • end - Fires whenever the runloop ends. Callbacks are passed the current instance and the next instance.

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.

Alias

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 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>

Simple Backbone Example

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!

Bitdeli Badge