如何为jQuery的.addClass和.removeClass方法添加延迟？

没问题，我来帮你搞定这个需求～ 你之前参考的例子可能用了动画队列相关的方法，但addClass和removeClass属于同步DOM操作，并不在jQuery的动画队列里，所以直接用delay()是无效的，得用setTimeout来实现延迟，而且还要处理快速多次hover的情况，避免延迟叠加导致的异常行为。

最终实现代码 #

// 先声明一个变量用来存储定时器ID，方便后续清理
let hoverTimer;

jQuery('.class').hover(
  // 鼠标进入时的处理
  () => {
    // 先清除可能存在的鼠标离开时的延迟定时器，避免冲突
    clearTimeout(hoverTimer);
    // 设置200ms延迟后添加类
    hoverTimer = setTimeout(() => {
      jQuery('#custom').addClass('addedclass');
    }, 200);
  },
  // 鼠标离开时的处理
  () => {
    // 先清除可能存在的鼠标进入时的延迟定时器
    clearTimeout(hoverTimer);
    // 设置200ms延迟后移除类
    hoverTimer = setTimeout(() => {
      jQuery('#custom').removeClass('addedclass');
    }, 200);
  }
);

关键说明 #

• 为什么不用delay()？因为delay()是专门为jQuery的动画队列设计的（比如fadeIn()、slideToggle()这类动画方法），而addClass/removeClass是直接修改DOM类名的同步操作，不会加入到动画队列中，所以delay()对它们完全不起作用。
• 加入clearTimeout(hoverTimer)的原因：如果用户快速多次触发hover（比如鼠标快速移入移出），可以清除之前未执行的定时器，避免出现“刚移入还没到延迟时间就移出，结果之后还是添加了类”这类不符合预期的行为。

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