How can I wait/pause in between underscore/backbone .each iteration?

backbone.js, jquery, underscore.js

Solution

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.

Problem

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?

Original source