jQuery 的 slideUp 和 slideDown 下拉卷动问题

最初公司前端写了个导航菜单，鼠标停留时弹出下拉菜单，移走鼠标时收缩下拉菜单，可就是这个简单的功能，T！！M！！D！！你屮它屮快了的时候，下拉菜单就不完整了，就像~~~包茎？？

本来官方提供的方法，会出现这种问题：如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过...

但是我们的会包茎，对，没错。

$(this).find("a").stop().slideUp();

因为多了个stop，会停止掉当前执行的脚本，如果当前下拉菜单正在卷动的过程中，那它的样式（主要是高度）就会被修改，并且一直是被修改的那个高度，再次触发下拉时，也只有那么一点点。。。。

所以删掉了stop方法，增加一个setTimeout，成为下面的完整代码，效果OK，也不会出现上面演示页面中的问题。

// 线程 IDs
    var mouseover_tid = [];
    var mouseout_tid = [];

    jQuery(document).ready(function(){
        jQuery(".menu .nav li").each(function(index){
            jQuery(this).hover(

                    // 鼠标进入
                    function(){
                        var _self = this;
                        // 停止卷起事件
                        clearTimeout(mouseout_tid[index]);
                        // 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中
                        mouseover_tid[index] = setTimeout(function() {
                            $(this).find("a").addClass("current");
                            jQuery(_self).find('.box').slideDown(200);
                        }, 201);
                    },

                    // 鼠标离开
                    function(){
                        var _self = this;
                        // 停止展开事件
                        clearTimeout(mouseover_tid[index]);
                        // 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中
                        mouseout_tid[index] = setTimeout(function() {
                                $(this).find("a").removeClass("current");
                                jQuery(_self).find('.box').slideUp(200);
                            }, 201);
                    }

            );
        });
    });