动态绑定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))}>">&nbsp;设计小物</a></li>
<li style="background:url('__PUBLIC__/img/虚拟物件.png') no-repeat 0 11px;position:relative;"><a href="<{:U('Pro/more',array('type'=>2))}>">&nbsp;虚拟物件</a></li>
<li style="background:url('__PUBLIC__/img/材料推荐.png') no-repeat 3px 12px;position:relative;"><a href="<{:U('Pro/more',array('type'=>3))}>">&nbsp;材料推荐</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();
        }
    });
});