jQuery中的slideUp和slideDown动画快速划过引起滞后反复执行的问题

 之前在用jQuery的slideDown和 slideUp 两方法做下拉导航菜单的时候，发现用鼠标快速地连续划过的时候，动画效果会滞后，而且反复执 看起来相当不爽，不美观, 但是这2个方法我们使用的几率还是很高的, 却一直存在这么一个小问题。如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画是会滞后的反复执行的，那么该如何去处理呢？

其实也很简单,我们只需在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题. 例如: 当鼠标滑过导航后 0.2 秒, 下拉菜单才会展开, 如果鼠标离开导航时, 展开的处理将被终止. 也就是说, 想要展开下拉菜单鼠标必须有 0.2 秒的事件停留在导航上, 那么迅速地划过导航是无法执行展开事件的. 收起也是如此

注意: 当鼠标悬停时间小于动画时间时, 同样可能出现反复执行现象, 可以考虑将悬停时间设置比动画时间稍长

改进后如下列子所示：

demo请点我

var mouseover_id=[]; 
var mouseout_id=[]; 
$(function(){
	 $('.nav li').each(function(index){ 	
		$(this).hover(function(){ 	
			var that = this; 		
				clearTimeout(mouseout_id[index]); 
				mouseover_id[index] = setTimeout(function() { 	
						$(that).find(".navmore").slideDown(150); 		
				}, 200);
			},function(){ 		
				var that = this; 					
				clearTimeout(mouseover_id[index]); 	
				mouseout_id[index] = setTimeout(function() { 			
					    $(that).find(".navmore").slideUp(150); 		
				}, 200); 		
			}); 	
	});
})