多次触发addClass时如何让对应removeClass仅针对最后一次操作执行一次

核心思路 #

问题根源是每次点击生成独立的setTimeout定时器，未做统一管理，导致多个移除类的操作积压执行。只需要全局维护一个定时器ID，每次触发点击时先清除上一次未执行的定时器，仅保留最后一次点击生成的定时器即可。

实现代码 #

// 全局存储定时器ID
let toastTimer = null;

btn.onclick = function() {
   toast.classList.add('showToast');
   // 清除上一次未执行的移除定时器
   clearTimeout(toastTimer);
   // 生成新的定时器，覆盖存储ID
   toastTimer = setTimeout(function() {
      toast.classList.remove('showToast');
   }, 3100);
}

方案说明 #

• 每次点击都会正常执行addClass操作，符合多次触发add的需求
• 重复点击时旧的未执行的移除定时器会被直接销毁，永远只有最后一次点击对应的移除操作会在3.1秒后执行
• 3.2秒再点击时，会生成全新的定时器，不会被之前的旧操作影响，toast会正常显示满3.1秒后再消隐
• clearTimeout传入无效/已执行的定时器ID不会抛出异常，不需要额外做判空处理，兼容性极好

可选优化方案 #

如果需要避免toast显示时的动画抖动，或者需要重复点击时重新触发进场动画，可以在加类前先移除一次类再触发DOM重绘：

let toastTimer = null;
btn.onclick = function() {
   toast.classList.remove('showToast');
   // 触发DOM重绘，让重复添加类时动画能重新触发
   void toast.offsetWidth;
   toast.classList.add('showToast');
   clearTimeout(toastTimer);
   toastTimer = setTimeout(function() {
      toast.classList.remove('showToast');
   }, 3100);
}

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