为什么setTimeout函数可以解决我的Marionette ItemView/CollectionView DOM作用域问题？

Question

我有以下设置：

    var LayerItemView = Backbone.Marionette.ItemView.extend({

    tagName: 'li',
    className: 'stage-layer',
    template: '#layer-item-tpl',

    initialize: function() {
           $(this.el).attr('id' 'layer-'+this.model.id);
    },

    onRender: function() {
    App.vent.trigger('layer:rendered', this.model);
    }

});

正如我所相信的，DOM元素layer-id现在应该可用了。然后，eventHandler为每个模型创建一个到新创建的DOM元素的拉斐尔画布，如下所示：

var paper1 = new Raphael(document.getElementById('layer-1'), 896,504);  
var paper2 = new Raphael(document.getElementById('layer-2'), 896,504);  
var paper3 = new Raphael(document.getElementById('layer-3'), 896,504);  
etc.

但我从拉斐尔那里得到一个错误:未捕获TypeError:无法读取未定义的属性'x‘

这告诉我具有layer- in的元素在DOM中还不可用。我用一个简单的setTimeout解决了这个问题(可以这么做)：

setTimeout(function() {
  var paper1 = new Raphael(document.getElementById('layer-1'), 896,504);  
  var paper2 = new Raphael(document.getElementById('layer-2'), 896,504);  
  var paper3 = new Raphael(document.getElementById('layer-3'), 896,504);    
},0);

我对此感到不舒服。这可能是正确的实践吗？我想知道为什么这是可行的，它是否是一个好的实践。

Answer 1

这段代码具有欺骗性，因为乍一看可能会有人认为

var paper1 = new Raphael(document.getElementById('layer-1'), 896,504);  
var paper2 = new Raphael(document.getElementById('layer-2'), 896,504);  
var paper3 = new Raphael(document.getElementById('layer-3'), 896,504); 

和

setTimeout(function() {
  var paper1 = new Raphael(document.getElementById('layer-1'), 896,504);  
  var paper2 = new Raphael(document.getElementById('layer-2'), 896,504);  
  var paper3 = new Raphael(document.getElementById('layer-3'), 896,504);    
},0);

都是一样的。实际上，它们是非常不同的。

这两段代码的不同之处在于Javascript是一种单线程语言。在setTimeout中，当计时器达到0时，创建的任何setTimeout函数都不会被调用。它将被执行，在该时间范围内执行approximately，。首先，Javascript将继续执行它所在的当前代码块。

所以在你的情况下，setTimeout是在线程在它所在的当前代码块中完成之后执行的。

一个很好的参考，以及更详细的信息，可以在here上找到。作者: John Resig (jQuery)。