关于JavaScript的定时器的基础和应用

关于定时器有两种方式，一种是setTimeout,只能执行一次。另一种是setInterval,可以重复执行。而需重视的一点是如果之前的一个定时器还没有结束，就开始下一个定时器，就会产生“快进”的感觉，所以说开启新的定时器，必须清除之前的定时器。
贴出自己的应用案例：

案例一：图片的自动轮转
    <script>
        window.onload=function () {
            var oPic=document.getElementById('box');
            var oImg=oPic.getElementsByTagName('img')[0];
            var oSpan=oPic.getElementsByTagName('span')[0];
            var oP=oPic.getElementsByTagName('p')[0];
            var oUi=oPic.getElementsByTagName('ul')[0];
            var oLi=oUi.getElementsByTagName('li');
            var aImg=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
            var oText=['thisOne','thisTwo','thisThree','thisFour'];
            var num=0;
            var index=0;//自定义属性
            var timer=null;
            //var oldLi=null;
            //延时播放
            /////////////////////////////////////////////////////
            //修改:添加时间延时 完善用户体验
            function autoPlay() {
                timer=setInterval(function () {
                    num++;
                    num%=aImg.length;//运用取模的好处,不用再判断num的值
                    picChang();
                },2000);
            }
            setTimeout(autoPlay,2000); //执行一次
            //鼠标移进 清除定时器
            oPic.onmouseover=function () {
                clearInterval(timer);
            };
            //鼠标移出 重新播放
            oPic.onmouseout=function () {
                autoPlay();
            };
            /////////////////////////////////////////////////////
            for(var i=0;i<aImg.length;i++){
                oUi.innerHTML+='<li></li>'
            }
            //oldLi=oLi[num];
            function picChang() {
                oImg.src=aImg[num];
                oSpan.innerHTML=1+num+'/'+aImg.length;
                oP.innerHTML=oText[num];
                for(var i=0;i<oLi.length;i++){
                    oLi[i].className='';
                }
                oLi[num].className='active';
            }
            picChang();
            for (var i=0;i<oLi.length;i++){
                oLi[i].index=i;
                oLi[i].onclick=function () {
                    num=this.index;
                    picChang();
                    /*颜色的改变 1.全部清空 2.当前清空
                     1.全部清空
                     for(var i=0;i<oLi.length;i++){
                     oLi[i].className='';
                     }
                     this.className='active';
                     2.当前清空
                     oldLi.className='';
                     this.className='active';
                     oldLi=this;
                     * */
                }
            }
        }
    </script>

案例二：延迟消失的菜单
    <script>
        window.onload=function () {
            var oBox=document.getElementById('container');
            var aUl=oBox.getElementsByTagName('ul')[0];
            var aA=aUl.getElementsByTagName('a');
            var aLi=aUl.getElementsByTagName('li');
            var aContent=document.getElementById('content');
            var bUl=aContent.getElementsByTagName('ul');
//            var bLi=bUl.getElementsByTagName('li');
            var aTitle=['首页','关于我们','作品','微博'];
            var aText=[['首页风采','首页展示','最近更新','论坛公告'],['联系我们','作品展示','微信我们'],['作品展示','前端代码','前端设计'],['js教程','CSS教程','HTML教程']];
            var timer=null;
            //给父级元素添加标签
            for(var i=0;i<aTitle.length;i++){
                aUl.innerHTML+='<li><a href="javascript:"></a> </li><span>|</span>';

            }
            //在父级元素的基础上给子级元素添加标签
            for(var i=0;i<aText.length;i++){
                aContent.innerHTML+='<ul></ul>';
                for(var j=0;j<aText[i].length;j++){
//                    alert(aText[i][j]);
                    bUl[i].innerHTML+='<li><a href="javascript:">'+aText[i][j]+'</a></li><span>|</span>';
                    bUl[i].style.left+='30px';//??
                }
            }
            //核心代码的运行
            for(var i=0;i<aTitle.length;i++){
                aA[i].innerHTML=aTitle[i];
                aA[i].index=i;
                //清除定时器(无论是否为null,都是可以清楚的)
                clearTimeout(timer);
                //父级元素添加移入事件
                aA[i].onmouseover=function () {
                    this.className='active';
                    bUl[this.index].style.display='block';
                };
                //父级元素添加移出事件
                aA[i].onmouseout=function () {
                    this.className='';
                    var n=this.index;
                    timer=setTimeout(function () {
                        /*
                         ??为什么 'Cannot read property 'style' of undefined'
                         解决:不能用bUl[this.index].style.display='none';
                              用一个变量代替this.index
                        * */
                        bUl[n].style.display='none';//
                    },100)
                };
                //子级元素添加移入事件
                bUl[i].onmouseover=function () {
                    clearTimeout(timer);
                    this.style.display='block';
                };
                //子级元素添加移出事件
                bUl[i].onmouseout=function () {
                    this.style.display='none';
                }
            }

        }
    </script>