小记setTimeout

前言：从《原生JS实现轮播（上）》中JS实现渐变效果，引出的setTimeout用法问题。

对于setInterval比较熟悉，但对于setTimeout，因为用得少，不够了解，总觉得有一层神秘的面纱待揭开。

1.setTimeout实现setInterval效果

    showTime();

    function showTime(){
        var today = new Date();
        document.write("The time is: " + today.toString());
        document.write("<br />");
        setTimeout("showTime()", 5000);  //调用自身
    }

和setInterval的区别？这个还待深究。

2.JavaScript引擎单线程

浏览器多线程/循环阻塞/事件循环模型（这几个概念待了解）
问题：

<script type="text/javascript">
     var start = new Date;
     setTimeout(function(){
     var end = new Date;
     console.log('Time elapsed:', end - start, 'ms');
     }, 500);
     while (new Date - start < 1000) {};

</script>

输出的结果并不是期望的Time elapsed: 500 ms，而是大于1000ms的。因为JS是单线程的，while完成后（执行了1000ms），达到了执行setTimeout的条件了才执行。也就是说，对setTimeout中匿名函数的实际调用被while()循环阻塞了，实际的调用在while()循环阻塞结束后才真正执行。

3.延迟时间为0

<script>
    console.log('a');
    setTimeout(function(){
        console.log('b');
    },0);
    console.log('c');
    console.log('d');
</script>

显示的结果是：acdb，因为即使延迟时间为0，浏览器也是有默认最小的延迟时间的，如HTML5定义的最小时间间隔是4毫秒。即使我们把setTimeout的毫秒数设置为0，被调用的程序也不会马上启动。

4.setTimeout实现动画

例子：

<div id="container" style="width:100px;height:100px;border:1px solid black;"></div>
<div id="btn" style="width:40px;height:40px;line-height:40px;margin-top:20px;background:pink;">click</div>

<script>
             window.onload = function(){
                 var con = document.getElementById('container');
                 var btn = document.getElementById('btn');
                 //Params: i 为起始高度，num为预期高度
                 function render(i, num) {
                     i++;
                     con.style.height = i + 'px';
                     //亮点在此
                     if(i < num){
                         setTimeout(function() {
                             render(i, num); //这里调用自身而循环执行
                         },0);
                     }
                     else {
                         con = null;
                         btn = null;
                     }
                 };
                 btn.onclick = function(){
                     render(100, 200);
                 };
             };
</script>

5.setTimeout实现捕获事件

例子（捕获事件又给自己挖了个坑）

<div id="parent" style="width:100px;height:100px;border:1px solid black;">
            <div id="child" style="width:50px; height:50px; background-color:#fcc;"></div>
</div>

<script>
            //点击子元素，实现子元素的事件在父元素触发后触发
            window.onload = function(){
                var parent = document.getElementById('parent');
                var child = document.getElementById('child');
                parent.onclick = function(){
                    console.log('parent');
                }
                child.onclick = function(){
                    //利用setTimeout，冒泡结束后，最后输出child
                    setTimeout(function(){
                        console.log('child');
                    },0);
                }
                parent = null; //不知为何这句无效
                child = null;  //不知为何这句无效
            }
</script>

6.setTimeout中的this

这个等研究this的时候一起，又挖了个坑。。

参考文章
http://www.cnblogs.com/giggle/p/5346531.html
http://www.cnblogs.com/Medeor/p/4945687.html