骨干调用中的随机字符效果渲染多次

Question

我在Backbone的模板中有一个字符块渲染。模板正在接收一个字符列表并将它们混洗（使用下划线的shuffle方法），然后在屏幕上以网格显示它们。我认为渲染屏幕几次并且每次随机化列表都很酷，因此它具有一种随机效果。

所以我尝试在调用模板的视图中执行此操作：

for(var i=1; i<50; i++){
     this.$el.html(this.template(jQuery.extend(this.model.toJSON(), extended_options)));..
}

在模板中：

 temp_list = _(listcontents).shuffle()
  for(var character in temp_list)
  { %> <span><%= temp_list[character] %></span> <% }
}

但我根本没有看到洗牌效果。屏幕渲染一次只需要几秒钟。

如何在用户眼前快速重复渲染？

Answer 1

你的for循环非常快速地渲染模板50次。你可以这样做：

for(i = 0; i < 50; i++) {
  setTimeout(function() {
    this.$el.html(this.template(...);
  }, i * 50);

这基本上做的是将渲染间隔大约50ms。你可能不得不修补i * 50部分以获得所需的效果。