jquery - 我如何在下划线/主干之间进行每次迭代的等待/暂停？

在我的Backbone视图中，我想遍历一个集合，并为每个项目渲染一个新的子视图，但是之间有一个小的延迟（大约200毫秒）。在该示例中，Flock是称为“羊”的Backbone模型的集合：)

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

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

我将如何处理？

最佳答案

这应该工作：

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

基本上，您使用的是递归函数，它会在传递给定延迟后调用自身。该函数正在集合中的模型之间进行迭代，并且在耗尽集合时将停止递归调用自身。