我如何在下划线/骨干.each迭代之间等待/暂停？

Question

在我的Backbone视图中,我想迭代一个集合,并为每个项目渲染一个新的子视图,但两者之间有一个小的延迟(大约200ms).在这个例子中,Flock是一个名为Sheep :)的Backbone模型集合

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

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

我该怎么做？

Answer 1

这应该工作:

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);
},

基本上,你使用递归函数在传入给定的延迟后调用自身.函数迭代集合中的模型,并在集合耗尽时停止递归调用.