无延时可斜着滑动的二级菜单的实现

    通常普通的二级菜单，会有一个普遍存在的问题，那就是，当用户想从一级菜单进入二级菜单的时候，需要平移到二级菜单，才能进行二级菜单的操作，然而这是很不符合用户的使用习惯的，更常见的习惯是用户会直接斜着进入二级子菜单，那么就需要在斜着进入的时候，二级子菜单不发生更新。
    为了实现这一点，需要引入一个定时器来进行缓冲，来判断缓冲时间内，用户是否还在一级菜单区域，如果已经进入到了二级菜单区域，则不执行更新
    
 ![直接返回](https://img-blog.csdn.net/20180921235120362?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjQwNzQ5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
 这样就解决了可以斜着进入二级菜单的问题但是又引入新的问题，一个问题就是抖动，当从第一个一级子菜单迅速向下滑动到第三四个的时候，二级子菜单会发生抖动，影响用户体验，为了解决这个问题，需要进行一个定时器的清除步骤，只保留最后一个定时器，例如，从第一个进入第二个的时候，开启了一个定时器，这是迅速进入到了第三个，那么就应该关闭第一个定时器，只执行最后这一个 显示第三个二级子菜单的定时器，这样就解决了抖动的问题
 最后还有一个关键的问题，就是因为定时器的存在，导致用户上下选择一级子菜单的时候，会有延迟出现，影响了用户的体验，为了解决这个问题，提出了一个动态预测的方法，来判断是否需要延迟（只有当用户想进入二级子菜单的时候才需要延迟）
  那么如何判断用户是想切换一级子菜单还是进入二级子菜单呢，这里用了一个三角形的预测方法，![在这里插入图片描述](https://img-blog.csdn.net/2018092123582434?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjQwNzQ5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
  如图所示，假设用户上一个鼠标停留的点在A点，下一个位置如果在三角形PAB内部，则判断用户想进入二级子菜单，进行延迟，否则判断用户是想切换一级子菜单，不进入延迟,要实现这个判断需要一定的数学知识，如果PA,PB,PC互相叉乘之后的结果符号相同，则P点在三角形内，因此需要引入向量，向量叉乘。
  注：在实现过程中，发现最后有一个小BUG，在一级子菜单上下切换的时候，有时候会出现二级子菜单空白显示的情况，排查了很久以后发现是冒泡的问题，DOM结构中!(https://img-blog.csdn.net/20180922095705942?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjQwNzQ5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)是用span来显示字符的，但是在绑定鼠标事件的时候，是绑定在了Li上，而li上的事件触发有可能是span冒泡上来的，因此ev.targer不是Li,无法获取到li的data-id导致出现空白，增加一个判定ev是否是Li节点就可以解决这个问题。