关于setTimeout延迟时间为0

在用html5做动画的过程中，我们一般都会遇到一些奇怪的问题，然后我们使用了

setTimeout(function(){//code}, 0); 

竟然好使了，哈哈

好用就行了，测试都通过，也不用去想为什么，但是上周做单位的项目，我整理了一套动画架构（比直接抄袭好一点，呵呵），都已经上线了，我无意中发现了一个ios上执行动画的bug，测试了一个下午，最后用

setTimeout(function(){//code}, 0);

解决了，这已经不是第一次遇到这个问题了，应该思考一下是为什么了，好，切入正题

javascript的执行分两个阶段，分先后执行

1 代码执行阶段

2 事件和队列阶段(

参考 John Resig的How JavaScript Timers Work

原文 http://ejohn.org/blog/how-javascript-timers-work/

原文加翻译 http://www.51094.com/?p=315

)

测试发现setTimeout应该是在第2阶段队列里执行的，代码说话

<script type="text/javascript">
setTimeout(function(){console.log('queue');}, 0);
console.log('a')
</script>

执行结果

a

queue

我猜测ios的动画是放在队列里执行的，我的代码

1,el1.style.webkitAnimation =  "ant1  0.3s ease-out";
2,el2.style.webkitAnimation =  "ant2  0.3s ease-out";
3,el2.style.display = "block";

el2.style.display = "block";

在 1，2句之前执行，

导致动画没有执行，el2就显示出来，bug出现了，这里有一个时间差，代码块执行到队列执行的时间，这个我们是可以感知的

使用

setTimeout(function(){

el2.style.display = "block";

}, 0);

相当于把

el2.style.display = "block";

也放在对队列中，1，2，3都在队列中执行，动画变得顺畅，ok