Mouseleave/mouseenter与mousemove冲突引发异常，求排查原因

问题背景 #

你一开始用jQuery实现导航栏的左右滑动动画，单独给header绑定mouseenter和mouseleave事件时效果是正常的：

• 鼠标进入header，导航栏（nav ul）从左滑到margin-left:150px的位置
• 鼠标离开header，导航栏滑回margin-left:0px

但后来为了处理页面加载时鼠标已经在.main-wrapper上的情况，给这个元素加了mousemove事件来触发导航栏左移，结果就出问题了：原来的mouseenter/mouseleave功能失效，还会随机触发动画。

问题根源 #

我帮你拆解下核心原因：

1. 动画队列堆积：mousemove事件的触发频率极高——只要鼠标在.main-wrapper上移动一下，就会触发几十次事件。每次触发都会给nav ul添加一个新的动画任务到jQuery的动画队列里。当队列里塞满了动画，后续mouseenter/mouseleave触发的动画就会被挤到后面，甚至被覆盖，导致看起来“失效”或者随机触发。
2. 事件层级冲突：如果header是嵌套在.main-wrapper里面的，那鼠标在header上移动时，会同时触发.main-wrapper的mousemove事件。这就会出现两个事件同时给导航栏发动画指令，互相干扰，动画自然就乱了。

解决办法 #

给你几个实用的修复方案，按优先级排序：

• 方案一：清空动画队列再执行新动画
  在每次调用animate前，用.stop(true, true)清空之前的动画队列，并且让当前动画直接跳到结束状态。修改后的代码如下：

  $('header')
    .mouseleave(function() {
      $('nav ul').stop(true, true).animate({ 'margin-left': '0px' }, 250 );
    })
    .mouseenter(function() {
      $('nav ul').stop(true, true).animate({ 'margin-left': '150px' }, 250 );
    });
  
  $('.main-wrapper')
    .mousemove(function() {
      $('nav ul').stop(true, true).animate({ 'margin-left': '0px' }, 250 );
    });
  

  这个方法能立刻解决队列堆积的问题，让新动画直接覆盖旧的，不会出现冲突。

• 方案二：限制mousemove事件的触发频率
  mousemove完全不需要每次移动都触发，我们可以用“节流”函数，比如每隔100ms才允许触发一次事件，减少动画触发次数。举个简单的实现：

  let isThrottled = false;
  $('.main-wrapper').mousemove(function() {
    if (!isThrottled) {
      isThrottled = true;
      $('nav ul').stop(true, true).animate({ 'margin-left': '0px' }, 250 );
      setTimeout(() => {
        isThrottled = false;
      }, 100);
    }
  });
  

• 方案三：优化事件触发逻辑
  如果header在.main-wrapper内部，我们可以在mousemove事件里判断鼠标是否在header上，如果是就不执行动画：

  $('.main-wrapper').mousemove(function(e) {
    if (!$(e.target).closest('header').length) {
      $('nav ul').stop(true, true).animate({ 'margin-left': '0px' }, 250 );
    }
  });
  

  这样就能避免在header区域同时触发两个冲突的事件。

内容的提问来源于stack exchange，提问作者sc0