javascript - 关于下拉菜单的问题?
本文介绍了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屋!
查看全文