setTimeout 0 妙用

why?

<div id="test">

</div>

<script>
    document.getElementById('test').innerHtml = "<div id='er'></div>";
    document.getElementById('er').innerHtml = 'test';  
</script>

在脚本中，第一步在test容器中，插入子容器er。接着第二步在子容器er中，写入文字。这里，可能第一步完成后，页面dom树并没有立即得到更新，可能在第二步中并不能成功获取到er容器，造成错误

how？怎么样避免这种错误呢？

setTimeout(function(){},0);

表示0毫秒后，立刻执行此函数。0 毫秒的起点是：文档稳定后开始计时。

what？

上述脚本应该这样写：

<script>
    document.getElementById('test').innerHtml = "<div id='er'></div>";
    setTimeout(function(){
        document.getElementById('er').innerHtml = 'test';  
        },0);
</script>

案例1 ：

iscroll 中，当容器内容发生更新时，需要调用refresh 函数，官方文档是这样调用的

ajax('page.php', onCompletion);

function onCompletion () {
	// Here modify the DOM in any way, eg: by adding LIs to the scroller UL
	
	setTimeout(function () {
		myScroll.refresh();
	}, 0);
};

setTimeout  0 在此时的作用是，当更新的内容在文档流中稳定后，再使用refresh 计算更新后的容器大小

参考：

http://cubiq.org/iscroll-4

http://www.jb51.net/article/17193.htm