关于伸缩菜单js代码正确实现

今天在imooc上看的伸缩菜单的js实现 http://www.imooc.com/video/93

自己实践的时候发现这个代码是有问题的。     先上错误代码

<ul>
<li style="background-color: red; width: 100px">第一个</li>
<li style="background-color: red; width: 100px">第二个</li>
<li style="background-color: red; width: 100px">第三个</li>
</ul>
<script type="text/javascript">
window.onload = function () {
var ls = document.getElementsByTagName("li");
for (var i = 0; i < ls.length; i++) {
ls[i].onmouseover = function () {
var This = this;
This.time = setInterval(function () {
This.style.width = This.offsetWidth + 20 + "px";
if(This.offsetWidth >= 160){
This.style.width = 160 + "px";
clearInterval(This.time);
}
}, 30)
};}
for (var i = 0; i < ls.length; i++) {
ls[i].onmouseout = function () {
var This = this;
This.time= setInterval(function () {
This.style.width = This.offsetWidth - 20 + "px";
if(This.offsetWidth <=100) {
This.style.width = 100 + "px";
clearInterval(This.time);
}
}, 30)
};
}
}
</script>

这个代码忽略了两个问题。

1.如果鼠标悬浮瞬间离开，到空白处（即长度未增加多少的时候），多来几次，即可能造成无限循环

原因：离开时，悬浮变长的动作还没完，悬浮时，离开减小的动作还没完，发生冲突，某个时刻满足循环条件会出现动画循环

2.如果鼠标悬浮瞬间离开，到另一个list处，多试几次，会发生什么？ 我们也是可以看到无限循环动画的发生。

原因 把增减动画都归类到了 obj.time属性里面。如果按2到操作，极有可能出现在某一时刻同一obj增减到冲突，本来应该减的，但是增的动作还没完，就会一直增，导致减也也完成不了

解决办法 ：1------》在鼠标悬浮函数开头清空鼠标离开的所有动画，在鼠标离开函数开头清空鼠标悬浮的所有动画

2--------》 鼠标悬浮和离开这两个动画应该分开，不能用同一个属性，要分别用两个属性表示（最后面讲一讲为什么要用属性，不能用全局变量，不能用局部变量，同时也讲一下为什要用v a r  T his= this）

正确代码如下：

<script type="text/javascript">
window.onload = function () {
var ls = document.getElementsByTagName("li");
for (var i = 0; i < ls.length; i++) {
ls[i].onmouseover = function () {   //内部函数1
var This = this;
clearInterval(This.off);
This.on = setInterval(function () {
This.style.width = This.offsetWidth + 20 + "px";
if(This.offsetWidth >= 160){
This.style.width = 160 + "px";
clearInterval(This.on);
}
}, 30)
};}
for (var i = 0; i < ls.length; i++) {
ls[i].onmouseout = function () {   //内部函数2
var This = this;
clearInterval(This.on)
This.off = setInterval(function () {
This.style.width = This.offsetWidth - 20 + "px";
if(This.offsetWidth <=100) {
This.style.width = 100 + "px";
clearInterval(This.off);
}
}, 30)
};
}
}
</script>

为什么用属性？

首先我们肯定不能用局部变量，在内部函数2（1）肯定无法访问内部函数1（2）的局部变量，那么就没办法清除“动画栈”里的动画了

为什么不用全局变量 o n 、o f f.   我们考虑一种情况。假设我从listA快速移到listB。 此时on表示增加的动画 off表示减小的动画

离开A到B的一瞬间  B触发onmouseover   执行clearInterval(off) A还没来得及减小到原来的长度就被迫停止了

换句话说 如果用全局变量从此动画不在区分是针对哪个对象的动画

为什么用var This = this ？

  set interval是延时函数。执行的时候this已经变成了window 而我们想要this绑定到list上 所有用变量This储存lIst 的地址,因为执行var This = this.this绑定的对象还没有变化