javascript - 关于下拉菜单的问题？

问题描述

问 题

完整代码在此：http://www.imooc.com/code/1737

    aLi[i].onmouseover=function(){ //为每个li标签添加鼠标移入动作
        var oSubNav=this.getElementsByTagName('ul')[0]; //获取鼠标当前li标签的第一个ul标签（二级菜单）
        if(oSubNav){ //如果ul标签存在的话
        var This=oSubNav; // 是否多余？
        clearInterval(This.time); //为什么要有？
        This.time=setInterval(function(){ //定时，让二级菜单ul自增
                This.style.height=This.offsetHeight+1+"px"; //获取当前二级菜单ul高度 + 1
                if(This.offsetHeight>=120) //高度大于等于120时
                clearInterval(This.time); //停止执行
            },1)
        }
    }

这是我的疑问，其中 var This=oSubNav; 是不是完全多余的？因为把This替换回原来的oSubNav也是可以的。

第二个问题：为什么要用This.time来存放定期器？
我试了下，把This.time改成随便var一个变量，就出问题了。鼠标只有停在下拉菜单中第2、4个li才有效；停在第1、3个li会触发鼠标移开事件；
而且alert(This.time)是，每次鼠标移上去都是弹出2、4、6、8、10、12、没有单数，这其中必有联系，但是想不出问题是在哪里。

第三个问题：为什么要在定时器之前清除定时器呢？clearInterval(This.time);

请教各位大神。[抱拳]

解决方案

    aLi[i].onmouseover=function(){ //为每个li标签添加鼠标移入动作
        var oSubNav=this.getElementsByTagName('ul')[0]; //获取鼠标当前li标签的第一个ul标签（二级菜单）
        if(oSubNav){ //如果ul标签存在的话
        var This=oSubNav; // 是否多余？答： 的确是多余的，你可以直接使用 oSubNav 变量即可
        clearInterval(This.time); //为什么要有？答：每开启一个定时器就会产生一个线程（类似概念）
                                               // 如果你不先清除已有的（无论是否有）定时器
                                               // 那么问题就会很明显的暴露出来：
                                               // 动画速度在不断加快
                                               // 原因是有多个线程在操作 同一元素
                                               // 他们之间相互影响
                                               // 所以，你如果要保持始终只有一个线程控制
                                               // 这个元素的话，就需要先清除已有的线程
                                               // 无论有没有，都清除，这是最保险的
                                               // 反正没有的话，清除也不会报错
                                               // 这是为了增强代码的健壮性，不容易出错） 
        // 之所以要用 This.time = ... 来存这个定时器，是因为你不存起来
        // 后面你怎么移除这个已定义的定时器？？
        // 就像你找人一样，如果他没有名字，你怎么找到他？？
        // 所以，这边要存起来
        This.time=setInterval(function(){ //定时，让二级菜单ul自增
                This.style.height=This.offsetHeight+1+"px"; //获取当前二级菜单ul高度 + 1
                if(This.offsetHeight>=120) //高度大于等于120时
                clearInterval(This.time); //停止执行
            },1)
        }
    }

1 ， 2回答在上线注释中。

问题3：
模拟一个过程，就是那个定时器的过程。如果是在定时器定义之后清除，会怎么样？？

var time = null;
var i = 0;
function test(){
  time = setInterval(test , 1000);     // 定义
  i++;
  console.log(i);                      // 打开控制台查看
  clearInterval(time);                 // 清除
}

你觉得代码会无限执行下去吗。答案是不会。他只会执行一次。因为在执行定时器之前，定时器就被你给清除了。
 

然后按照原代码来看下过程：

var time = null;
var i = 0;
function test(){
    clearInterval(time); // 清除定时器，虽然第一次执行的时候没有被设置
                         // 不过，他又不会报错，你理他呢
                         // 第二，三次....总之，接下去的执行才是亮点
                         // 每次都会清楚上次定义的定时器
                         // 所以，能够确保，每次执行时，只有一个定时器在执行
    
    i++;
    
    console.log(i);
    
    time = setInterval(test , 1000); // 定义定时器
}
test();

所以，要先清除定时器，后定义

这篇关于javascript - 关于下拉菜单的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！