javascript - 为什么主干 View 在早期代码之前呈现？

Question

这是我设置的一个示例页面，在主干 View 呈现后，#blueSquare div 可见。即使代码放在创建 View 之前。我希望看到蓝色方 block 立即显示，而不是在(强制长时间)渲染 View 之后显示。我的目标是使加载微调器在创建 View 之前显示，并在呈现 View 后隐藏。但是我不明白这个问题。

<style>

#blueSquare
{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background: blue;
    display: none;
}

</style>

<script type="text/javascript" src="js/ext/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/ext/underscore-min.js"></script>
<script type="text/javascript" src="js/ext/backbone-min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    TestView = Backbone.View.extend(
    {
        initialize: function()
        {
            console.log('initialize view');
            for (var i = 0; i < 1000000000; i++)
            {
                var t = Math.sqrt( i );
            }
            this.render();
        },
        render: function()
        {

            console.log('render view');
            //$('#blueSquare').hide();
        }
    });

    $('#blueSquare').show();
    var testView = new TestView();

});

</script>

<div id="blueSquare"></div>

Answer 1

最简单的解决方案是推迟 View 的创建以允许 DOM 刷新。您可以通过将 View 创建包装在 _.defer() 中来做到这一点

$('#blueSquare').show();
_.defer(function(){
    var testView = new TestView();
});

至于为什么的解释见Why is setTimeout(fn, 0) sometimes useful?