JS冒泡和闭包案例分析
2015-06-03 13:31
453 查看
背景：
今天逛网页发现了百度知道上一个有意思的JS问题，提问者的问题其实蛮简单的，懂点前端开发技术的应该都能实现。提问者的要求：实现子菜单的弹出，菜单共有三级，每级菜单显示时有500毫秒的延迟。然后提问者贴出了他的问题代码。
对别人贴出来的代码，只要不是特别复杂，我都会看一眼。毕竟程序员交流，源代码是最好的语言，刚开始看他的代码就有点感觉哪里不对。后来仔细分析了下，发现确实是蛮有意思的。如果感觉分析过程比较无聊，可以直接看结论。
下面是他的代码：
上面的代码，我们拿出JS部分来研究下：
首先抛开最基本的错误，比如应该用setTimeout设置延迟。
问题：
我想很多人应该都和我有同样的疑问：鼠标移到子菜单后一级菜单应该执行onmouseout方法啊，然后子菜单应该被隐藏才对。但实际上，如果鼠标移的快的话子菜单有“闪烁”现象但是最终是可以显示的，只是三级菜单显示不出来。
疑问：
难道是onmouseout方法没有执行吗？带着这个疑问，我在onmouseout和onmouseover方法上加上了console.log，并断点调试了下。结果发现一个有意义的现象。
onmouseout方法确实执行了，也就是子菜单是的style属性变为了none，但是控制台显示，整改方法的执行顺序：父菜单onmouseout -> 子菜单 onmouseover–>
父菜单onmouseover –> 子节点 onmouseout –> 父节点 onmouseout
原因：
出现上面的问题主要原因有三点：
（1）JS的执行是需要耗时的，尤其是设置style的display是要引发render Tree的重构的，所以界面不会里面发现变化。
（2）提问者的onmouseover函数是故意设置了一个500毫秒的延迟来执行显示函数的。
（3）浏览器的事件模型是冒泡执行的。
分析：
当然上面的原因，翻译***话就是：
当鼠标移到子菜单的时候，浏览器去执行父菜单的onmouseout，这个时候理论上子菜单是需要隐藏的，但是因为第一点原因，子菜单没有隐藏，我们的鼠标移动到了二级菜单上。这个时候浏览器需要触发二级菜单上的onmouseover方法，然后执行子菜单的onmouseover方法，并设置了延迟函数，因为我们并没有阻止事件冒泡，二级菜单的onmouseover冒泡到一级菜单上，执行父菜单的onmouseover。
分析到上面，我们应该注意按理说二级菜单的onmouseover中应该把它子菜单（三级菜单）显示出来了。但是我们要注意onmouseover的逻辑并不是正常的逻辑，而是一种延迟。所以二级菜单的show函数（也就是那个匿名函数）执行是发生在一级菜单的onmouseover函数后的，所以me这个闭包变量被改变了。通过调试，可以发现me这个变量是挂载在windows下的，那么它就是一个全局变量了，子菜单的onmouseover把它设置为子节点本身，但是接着冒泡到父节点，onmouseover的this变为了父节点本身，所以最终show函数被执行两次，两次的me变量都是父菜单对应的节点。
上面这个问题有点类似高级程序设计语言（如Java）中进行多线程编程的资源竞争了，在高级程序语言中，为了同步一个资源（变量、对象），语言本身会提供类似synchronized的关键字。当然我们这里并不是多线程，没法办法同步这个变量（后面再说解决办法）。
接着分析，后面的两个onmouseout，其实更好理解了，当程序执行到这里的时候，浏览器终于完成了render Tree的重构，子菜单就隐藏了，然后浏览器就认为我们的鼠标移出了子菜单，所以开始出发子菜单的onmouseout事件，并且是冒泡执行的，具体过程不做分析了。
程序执行完两次onmouseout后，肯定不会花费500ms，除非你的机器特别老，所以这个时候，我们设置的两个延迟函数会被触发。然后执行me的子节点的显示，我们上面提到了两次show函数的me实际上是同一个变量，都指向了父菜单对应的节点。所以子节点就被显示了。
到了这里，我们的问题又来了，onmouseout里面调用了clearTimeout，那么两个延迟函数应该被取消啊。答案就是，clearTimeout用法不对。相信很多人和楼主我一样，并没有把JS当一门完整的技术学过，所以我们知道setTimeout和setInterval，知道用对应的clear方法取消。但是我们从没研究过它的运行机制（当然很多时候没必要，就好比Java刚出来的时候，很少有人关心JVM层次的东西）。这里我们不深究，只给出结论，从W3C上就可以知道。setTimeout和setInterval都会返回一个字符串（类似Thread
ID），调用clear方法时，需要传入对应的ID，这样才能停止执行延迟函数。
最后一个问题，既然子菜单经过了隐藏显示过程，那么为什么浏览器触发了onmouseout没有再次触发onmouseover，从而形成死循环，让页面死掉呢？至于这个问题，我也没有找到标准答案，也许浏览器对于mouse事件的触发是按照像素触发的吧，我们没有再移动鼠标，自然不会触发onmouseover了。
结论：
废话了一堆，很多人应该都不耐烦了，说下结论吧。
（1）JS编程，我们一定要注意事件冒泡，冒泡是个好东西，但是要谨慎使用，事件冒泡能让我们提高程序效率，比如table操作，很多时候我们会让事件冒泡到table上再进行操作，这样能有很高的执行效率。jQuery的事件处理就很好的利用了冒泡。
（2）谨慎使用闭包，JS编程中，闭包很容易造成内存泄露，谨慎使用，而且闭包变量很容易称为资源竞争对象，尤其是在延迟函数中，很容易发生莫名其妙的问题。
（3）clearInterval和clearTimeout一定要传入setInterval和setTimeout返回的ID，否则是无法正常取消延迟的。
（4）onmouseenter和onmouseleave可以作为解决上面问题的一种方案，但是兼容性问题要注意！ onmouseenter和onmouseleave不会进行事件冒泡，onmouseover和onmouseout会冒泡到父节点，this指向也会发生变化。
PS：
今天废话了一堆，分析这个案例没什么意思，只是无聊。“不求甚解”固然是求学哲学，但是“追本溯源”才是求解问题的方法。让人给出正确答案远比找出问题原因要容易。
今天逛网页发现了百度知道上一个有意思的JS问题，提问者的问题其实蛮简单的，懂点前端开发技术的应该都能实现。提问者的要求：实现子菜单的弹出，菜单共有三级，每级菜单显示时有500毫秒的延迟。然后提问者贴出了他的问题代码。
对别人贴出来的代码，只要不是特别复杂，我都会看一眼。毕竟程序员交流，源代码是最好的语言，刚开始看他的代码就有点感觉哪里不对。后来仔细分析了下，发现确实是蛮有意思的。如果感觉分析过程比较无聊，可以直接看结论。
下面是他的代码：
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
position: absolute;
}
li {
list-style-type: none;
text-align: center;
width: 70px;
height: 30px;
line-height: 30px;
}
#zg li {
background: blue;
float: left;
}
#zg li #bj li {
background: green;
}
#zg li #bj li #xc li {
background: red;
}
#xc,
#sjz {
position: relative;
left: 70px;
top: -30px;
}
#dc {
position: relative;
left: 70px;
top: -60px;
}
#bj {
display: none;
}
#hb {
display: none
}
#xc {
display: none;
}
#dc {
display: none;
}
</style>
<script type="text/javascript">
onload = function() {
var lis = document.getElementsByTagName("li");
var t = 0;
for (var i = 0; i < lis.length; i++) {
lis[i].timer = null;
lis[i].onmouseover = function() {
me = this;
me.timer = setInterval(function() {
if (me.children[0]) {
me.children[0].style.display = "block"
}
}, 500)
}
lis[i].onmouseout = function() {
clearInterval(me.timer)
this.children[0] ? this.children[0].style.display = "none" : 0;
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="zg">
<li>北京
<ul id="bj">
<li>西城区
<ul id="xc">
<li>西单</li>
<li>西单</li>
<li>西单</li>
</ul>
</li>
<li>东城区
<ul id="dc">
<li>东单</li>
<li>东单</li>
<li>东单</li>
</ul>
</li>
<li>崇文区</li>
</ul>
</li>
<li>河北
<ul id="hb">
<li>石家庄
<ul id="sjz">
<li>桥东</li>
<li>桥东</li>
<li>桥东</li>
</ul>
</li>
<li>保定</li>
<li>邢台</li>
</ul>
</li>
</ul>
</div>
</body>
</html>上面的代码，我们拿出JS部分来研究下：
onload = function() {
var lis = document.getElementsByTagName("li");
var t = 0;
for (var i = 0; i < lis.length; i++) {
lis[i].timer = null;
lis[i].onmouseover = function() {
me = this;
me.timer = setInterval(function() {
if (me.children[0]) {
me.children[0].style.display = "block"
}
}, 500)
}
lis[i].onmouseout = function() {
clearInterval(me.timer)
this.children[0] ? this.children[0].style.display = "none" : 0;
}
}
}首先抛开最基本的错误，比如应该用setTimeout设置延迟。
问题：
我想很多人应该都和我有同样的疑问：鼠标移到子菜单后一级菜单应该执行onmouseout方法啊，然后子菜单应该被隐藏才对。但实际上，如果鼠标移的快的话子菜单有“闪烁”现象但是最终是可以显示的，只是三级菜单显示不出来。
疑问：
难道是onmouseout方法没有执行吗？带着这个疑问，我在onmouseout和onmouseover方法上加上了console.log，并断点调试了下。结果发现一个有意义的现象。
onmouseout方法确实执行了，也就是子菜单是的style属性变为了none，但是控制台显示，整改方法的执行顺序：父菜单onmouseout -> 子菜单 onmouseover–>
父菜单onmouseover –> 子节点 onmouseout –> 父节点 onmouseout
原因：
出现上面的问题主要原因有三点：
（1）JS的执行是需要耗时的，尤其是设置style的display是要引发render Tree的重构的，所以界面不会里面发现变化。
（2）提问者的onmouseover函数是故意设置了一个500毫秒的延迟来执行显示函数的。
（3）浏览器的事件模型是冒泡执行的。
分析：
当然上面的原因，翻译***话就是：
当鼠标移到子菜单的时候，浏览器去执行父菜单的onmouseout，这个时候理论上子菜单是需要隐藏的，但是因为第一点原因，子菜单没有隐藏，我们的鼠标移动到了二级菜单上。这个时候浏览器需要触发二级菜单上的onmouseover方法，然后执行子菜单的onmouseover方法，并设置了延迟函数，因为我们并没有阻止事件冒泡，二级菜单的onmouseover冒泡到一级菜单上，执行父菜单的onmouseover。
分析到上面，我们应该注意按理说二级菜单的onmouseover中应该把它子菜单（三级菜单）显示出来了。但是我们要注意onmouseover的逻辑并不是正常的逻辑，而是一种延迟。所以二级菜单的show函数（也就是那个匿名函数）执行是发生在一级菜单的onmouseover函数后的，所以me这个闭包变量被改变了。通过调试，可以发现me这个变量是挂载在windows下的，那么它就是一个全局变量了，子菜单的onmouseover把它设置为子节点本身，但是接着冒泡到父节点，onmouseover的this变为了父节点本身，所以最终show函数被执行两次，两次的me变量都是父菜单对应的节点。
上面这个问题有点类似高级程序设计语言（如Java）中进行多线程编程的资源竞争了，在高级程序语言中，为了同步一个资源（变量、对象），语言本身会提供类似synchronized的关键字。当然我们这里并不是多线程，没法办法同步这个变量（后面再说解决办法）。
接着分析，后面的两个onmouseout，其实更好理解了，当程序执行到这里的时候，浏览器终于完成了render Tree的重构，子菜单就隐藏了，然后浏览器就认为我们的鼠标移出了子菜单，所以开始出发子菜单的onmouseout事件，并且是冒泡执行的，具体过程不做分析了。
程序执行完两次onmouseout后，肯定不会花费500ms，除非你的机器特别老，所以这个时候，我们设置的两个延迟函数会被触发。然后执行me的子节点的显示，我们上面提到了两次show函数的me实际上是同一个变量，都指向了父菜单对应的节点。所以子节点就被显示了。
到了这里，我们的问题又来了，onmouseout里面调用了clearTimeout，那么两个延迟函数应该被取消啊。答案就是，clearTimeout用法不对。相信很多人和楼主我一样，并没有把JS当一门完整的技术学过，所以我们知道setTimeout和setInterval，知道用对应的clear方法取消。但是我们从没研究过它的运行机制（当然很多时候没必要，就好比Java刚出来的时候，很少有人关心JVM层次的东西）。这里我们不深究，只给出结论，从W3C上就可以知道。setTimeout和setInterval都会返回一个字符串（类似Thread
ID），调用clear方法时，需要传入对应的ID，这样才能停止执行延迟函数。
最后一个问题，既然子菜单经过了隐藏显示过程，那么为什么浏览器触发了onmouseout没有再次触发onmouseover，从而形成死循环，让页面死掉呢？至于这个问题，我也没有找到标准答案，也许浏览器对于mouse事件的触发是按照像素触发的吧，我们没有再移动鼠标，自然不会触发onmouseover了。
结论：
废话了一堆，很多人应该都不耐烦了，说下结论吧。
（1）JS编程，我们一定要注意事件冒泡，冒泡是个好东西，但是要谨慎使用，事件冒泡能让我们提高程序效率，比如table操作，很多时候我们会让事件冒泡到table上再进行操作，这样能有很高的执行效率。jQuery的事件处理就很好的利用了冒泡。
（2）谨慎使用闭包，JS编程中，闭包很容易造成内存泄露，谨慎使用，而且闭包变量很容易称为资源竞争对象，尤其是在延迟函数中，很容易发生莫名其妙的问题。
（3）clearInterval和clearTimeout一定要传入setInterval和setTimeout返回的ID，否则是无法正常取消延迟的。
（4）onmouseenter和onmouseleave可以作为解决上面问题的一种方案，但是兼容性问题要注意！ onmouseenter和onmouseleave不会进行事件冒泡，onmouseover和onmouseout会冒泡到父节点，this指向也会发生变化。
PS：
今天废话了一堆，分析这个案例没什么意思，只是无聊。“不求甚解”固然是求学哲学，但是“追本溯源”才是求解问题的方法。让人给出正确答案远比找出问题原因要容易。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jsp out对象、response.getWriter与response.getOutputStream
- Javascript跨域与浏览器同源
- js获取时间距离倒计时
- 随笔分类 - 无废话ExtJs系列教程
- 详解JavaScript中循环控制语句的用法
- 记录一个JS异常Uncaught NotFoundError
- 讲解JavaScript中for...in语句的使用方法
- JavaScript中for循环的使用详解
- 详解JavaScript的while循环的使用
- JavaScript - implement page lazy loading via mouse scrolling
- JavaScript中switch语句的用法详解
- js之滚动置顶效果
- JavaScript中的条件判断语句使用详解
- js光标
- js 循环提交ajax请求
- Jstree Demo
- 简单介绍JavaScript的变量和数据类型
- 在HTML中插入JavaScript代码的示例
- 在浏览器中打开或关闭JavaScript的方法
- 浅谈javascript中基本包装类型