动态绑定AJAX，获取下级分类并延迟执行

HTML:

<div id='allType'>
<div class='allTypeHead'><span>所有分类</span></div>
<ul class='allType'>
<li style="background:url('__PUBLIC__/img/建筑师的非建筑.png') no-repeat 0 13px;position:relative;"><a href="<{:U('Pro/more',array('type'=>1))}>"> 设计小物</a></li>
<li style="background:url('__PUBLIC__/img/虚拟物件.png') no-repeat 0 11px;position:relative;"><a href="<{:U('Pro/more',array('type'=>2))}>"> 虚拟物件</a></li>
<li style="background:url('__PUBLIC__/img/材料推荐.png') no-repeat 3px 12px;position:relative;"><a href="<{:U('Pro/more',array('type'=>3))}>"> 材料推荐</a></li>
</ul>
</div>

Javascript:

// 声明全局变量addUl，如果声明在函数内部，则鼠标划入划出时都是创建的新变量，导致无法清除划入时的定时器
var addUl;
$(function() {
// 动态绑定不能绑定hover，只能用mouseenter mouseleave替代
$('#allType').on('mouseenter mouseleave', 'li', function(e) {
var t = $(this);
if (e.type == 'mouseenter') {
var a = $(this).find('a');
var width = $(this).width();
var href = a.attr('href');
var arr = href.split('/');
var id = arr[arr.length - 1];
arr = id.split('.');
id = arr[0];
// 由于jquery的BUG导致鼠标滑动过快的时候会有二级分类不会移除的情况，而这里使用的又不是动画，所以不能使用stop()。因此只能通过设置延迟执行AJAX来完成下级分类的添加
// 由于setTimeout()的延迟执行特效，所以在执行的函数中直接使用外部函数的变量是无法获取到的，因为当执行的时候变量已经销毁了。所以，这里就使用了一个闭包的方法来达到能调用外部函数的目的。
// 通常的setTimeout(function(){...},100)是这样写的，也就是第一个参数是个函数，里面是要执行的代码片段。
// 这里就使用了闭包的方法return function(){...}，第一个参数则接收到了一个函数，并往闭包中传入参数，这样就能先将变量赋给闭包的形参，里面的函数调用的就是闭包的形参，外部函数的销毁便不会影响到函数的执行了
addUl = setTimeout(function(a, id, width) {
return function() {
$.post(
'<{:U("Index/type")}>', { 'id': id },
function(data) {
if (data) {
var ul = '<ul style="background:white;position:absolute;left:' + width + 'px;top:-1px;z-index:100;border:1px solid #6386ae";>';
var id;
var href;
$.each(data, function(n, v) {
id = v['type_id'];
// 不能使用array()传参，并且还要加上Home
href = '<{:U("Home/Pro/more/type/' + id + '")}>';
ul += '<li style="margin:0;padding:0;text-align:center;width:100px;height:40px;overflow:hidden;" title="' + v['type_name'] + '"><a href="' + href + '" style="margin:0;width:auto;">' + v['type_name'] + '</a></li>';
});
ul += '</ul>';
a.after(ul);
};
}
);
}
}(a, id, width), 200);
// 阻止事件冒泡：当从三级分类移动到二级分类的时候，由于二级分类是在一级分类里创建的元素，所以会同时触发二级分类和一级分类的mouseenter事件，所以需要阻止冒泡行为！
e.stopPropagation();
} else {
// 当鼠标滑动过快的时候，会移除延迟的AJAX请求
clearTimeout(addUl);
// 鼠标移开任何一个li的时候都会移除子分类
t.find('ul').remove();
}
});
});