Why?

Why?

Asynchrony

Everything    good   and   bad   in  Front   End  Development

Why?

How?

        var mybb = new backburner(['firstQ', 'secondQ', 'thirdQueue']);
    

        mybb.run(function(){
            mybb.scheduleOnce(queuename, target, method);
            mybb.schedule(queuename, target, method);
        });
    

app.TodoView = Backbone.View.extend({
  // ...

  initialize: function () {
    this.listenTo(this.model, 'change', this.render);
  },

  render: function() {
    // do our DOM manipulations here. they'll get run many times :(
  }

  // ...
});
          

// triggers the view to rerender
model.set('firstName', 'Erik');
// triggers the view to rerender
model.set('lastName',  'Bryn');
          

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'); //you can pass {silent:true} to supress change
  model.set('lastName',  'Bryn');
});

// our view has been rerendered only once, thanks to backburner!

Using  Backburner.

var queuenames = ['render', 'afterRender'];
var backburnerSim = new backburner.Backburner(queuenames);
var j = 0;
var person = {'name':'PK'};
var self = this;
document.getElementById('withBB').addEventListener('click', function(){

  backburnerSim.run(function(){

    document.getElementById('bodyc').innerHTML = '';
    self.setName('Ini');
    self.setName('Mini');
    self.setName('Maini');
    self.setName('Mo');
    document.getElementById(name).style.color = red;
    //self.changeNameColor('named');

  });	
});

function setName(name){
  person.name = name;
  backburnerSim.scheduleOnce('render', setDomName);
}
i=0;
function setDomName(){
  console.log(i);
  var div = document.createElement('div');
  div.id = 'named';
  div.innerHTML = person.name + i;
  div.style.border = '1px solid black';
  div.style.height = '100px';
  div.style.width = '100px';
  document.getElementById('bodyc').appendChild(div);
  i++;
}

function actualColorChange(name){
  elem = document.getElementById(name);
  elem.style["background-color"] = 'red';
}	

function changeNameColor(name){
  var elem;
  backburnerSim.scheduleOnce('afterRender', this, actualColorChange, name);	
}

backburnerSim.run(function(){

    document.getElementById('bodyc').innerHTML = '';
    self.setName('Ini');
    self.setName('Mini');
    self.setName('Maini');
    self.setName('Mo');
    //document.getElementById(name).style.color = red;
    self.changeNameColor('named');

  });