jQuery鼠标悬停/移出卡片翻转多次触发问题及优化咨询

当前通过mouseenter/mouseleave绑定卡片翻转逻辑时，快速晃动鼠标会频繁触发事件，导致CSS过渡动画反复被打断、队列堆积，最终出现卡片闪烁、显示异常的问题。以下是两种更优的实现方式：

方案1：事件防抖（Debounce） #

通过防抖函数过滤频繁触发的事件，仅在用户停止鼠标操作一段时间后执行翻转逻辑，避免动画冲突。

替换原JS代码为：

// 防抖工具函数
function debounce(func, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(context, args), delay);
  };
}

// 绑定防抖后的事件处理
jQuery('.card')
  .mouseenter(debounce(function(e) {
    e.stopPropagation();
    jQuery(this).addClass('flipped');
  }, 100))
  .mouseleave(debounce(function(e) {
    e.stopPropagation();
    jQuery(this).removeClass('flipped');
  }, 100));

说明：设置100ms的延迟阈值，只有在鼠标停止进出卡片100ms后才执行翻转操作，有效过滤快速触发的无效事件。

方案2：动画状态锁定 #

利用CSS过渡结束事件（transitionend）标记动画状态，在动画执行过程中忽略新的事件触发，确保每次翻转完成后才能进行下一次操作。

替换原JS代码为：

// 鼠标进入处理函数
function onCardEnter(e) {
  e.stopPropagation();
  const $card = jQuery(this);
  // 动画进行中时不响应
  if ($card.hasClass('animating')) return;
  $card.addClass('animating flipped');
}

// 鼠标离开处理函数
function onCardLeave(e) {
  e.stopPropagation();
  const $card = jQuery(this);
  if ($card.hasClass('animating')) return;
  $card.addClass('animating').removeClass('flipped');
}

// 动画结束后解除锁定
jQuery('.card').on('transitionend webkitTransitionEnd oTransitionEnd', function() {
  jQuery(this).removeClass('animating');
});

// 绑定事件
jQuery('.card')
  .mouseenter(onCardEnter)
  .mouseleave(onCardLeave);

说明：新增animating类标记卡片处于动画状态，此时拒绝新的事件请求；动画完成后通过transitionend事件移除标记，恢复响应能力。这种方式完全避免了动画过程中的冲突，体验更流畅。

原CSS与HTML结构无需修改 #

保留你原有的CSS样式和HTML结构即可，仅需替换JavaScript部分的代码。

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