jquery - 如何在下划线/主干 .each 迭代之间等待/暂停？

Question

在我的 Backbone 视图中，我想遍历一个集合，并为每个项目呈现一个新的子视图，但两者之间有一个小的延迟（大约 200 毫秒）。在示例中，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);
},

基本上，您使用递归函数在您传入的给定延迟后调用自身。该函数正在迭代集合中的模型，并且在集合用完时将停止递归调用自身。

Answer 2

像这样将它包装在 setTimeout 函数中

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

这将调用 3 秒超时。