js--延时消失的菜单--（笔记）

html:有4个li,li下分别有一个span

<script>
   window.onload=function(){
    var aLi=document.getElementsByTagName('li'); 
    /*var timer=null; 全局timer的问题是：划到另一个项上，timer已被清除，上一项下拉菜单还遗留为收回,这样就是一个bug了；所以要每个li加一个timer,定义为自身的属性, 这样就只清除本身的timer ,不影响其他选项*/
    for(var i=0;i<aLi.length;i++){
    aLi[i].onmouseover=show;
    aLi[i].onmouseout=hide;
    aLi[i].getElementsByTagName('span')[0].onmouseover=show;
    aLi[i].getElementsByTagName('span')[0].onmouseout=hide; }
     
    function show(){
     clearInterval(this.timer );
     //划到另一项时，需要其他子项及时消失，so~
     for(var i=0;i<aLi.length;i++){ //记得数组下标比其长度小1，但是i<（小于），所以无需减一
      aLi[i].getElementsByTagName('span')[0].style.display='none';
     }     
     this.getElementsByTagName('span')[0].style.display='block';
     }
     
    function hide(){  
     var _this=this; 
     this.timer=setTimeout(function(){
      _this.getElementsByTagName('span')[0].style.display='none';
      },1000);   
     } 
    }
  </script>

注：timer里面不能用this