点击触发随机图片显示后淡出：如何延迟移除类并支持重复触发？

我来帮你搞定这个问题！你遇到的核心问题是用错了定时器，而且没把动画完成的时机和类的操作同步起来，下面一步步给你讲清楚：

首先纠正定时器的错误 #

你之前用setInterval是不对的——这个函数是重复定时执行代码，而我们只需要在淡出动画结束后执行一次移除类的操作，应该用setTimeout才对。不过更靠谱的方式是直接利用jQuery动画的回调函数，它能精准在动画完成后触发后续逻辑，比固定延迟更稳妥。

完整的实现逻辑 #

假设你的HTML结构是这样的（可以根据自己的实际结构调整）：

<div class="img-wrapper">
  <img src="default.jpg" class="showing" alt="随机图片">
</div>
<button id="random-img-btn">换一张</button>

对应的jQuery代码可以这么写：

// 先准备好随机图片的地址数组
const imageList = [
  "pic1.jpg",
  "pic2.jpg",
  "pic3.jpg",
  "pic4.jpg"
];

// 绑定点击事件
$("#random-img-btn").on("click", function() {
  const $targetImg = $(".img-wrapper img.showing");
  
  // 先执行淡出动画，动画结束后自动触发回调函数
  $targetImg.fadeOut(600, function() {
    // 第一步：移除控制显示的类
    $(this).removeClass("showing");
    
    // 第二步：随机选择一张新图片
    const randomIdx = Math.floor(Math.random() * imageList.length);
    const newImgSrc = imageList[randomIdx];
    
    // 第三步：更换图片地址，重新添加类并淡入显示
    $(this).attr("src", newImgSrc).addClass("showing").fadeIn(600);
  });
});

关键细节解释 #

1. 用动画回调替代固定延迟：fadeOut(600, function(){...})里的第二个参数就是动画完成后的回调，这里的600是动画持续时间（毫秒），回调会等淡出完全结束后才执行，不会出现“类已经移除但动画还没做完”的尴尬情况。
2. 类的移除与重新添加：移除showing类是为了让下次点击能再次识别到这个元素（如果你的类是控制显示状态的话），之后一定要重新添加类，不然新图片没法正常显示。
3. 如果一定要用setTimeout：如果你坚持用定时器，要保证延迟时间和动画持续时间一致，比如：

   $targetImg.fadeOut(600);
   setTimeout(function() {
     $targetImg.removeClass("showing");
     // 后续更换图片的逻辑...
   }, 600); // 这里的时间要和fadeOut的时长匹配
   

这样调整后，每次点击都会先让当前图片平滑淡出，等动画结束后更换随机图片再淡入，而且类的操作完全同步，下次点击肯定能正常触发啦！

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