Question

Inside my Backbone view, I want to iterate over a collection, and render a new child view for each item, but with a small delay in between (about 200ms). In the example, Flock is a collection of Backbone models called Sheep 🙂

render: function () {
  Flock.each(this.renderSheep)
},

renderSheep: function (mySheepModel) {
   var sheep = new SheepView({model:mySheepModel})
   $(sheep.render().el).appendTo('#field').fadeIn();
}

How would I go about this?

Answer 1

This should work:

render: function () {
    var i = 0,
        _self = this;

    (function renderSheepWithDelay(delay) {
        if (i <= Flock.length) {
        _self.renderSheep(Flock.at(i));
            i += 1;
        setTimeout(renderSheepWithDelay, delay);
        }
    })(200);
},

Basically, you’re using a recursive function to call itself after a given delay which you pass in. The function is iterating through the models in the collection and will stop recursively calling itself when it’s exhausted the collection.