使用jQuery setInterval切换火焰图层时出现同显问题的解决方案求助

我明白你遇到的困扰了——两个火焰图层偶尔会同时出现在屏幕上，打乱了想要的摇曳效果。这背后的原因其实很简单：你用了两个完全独立的setInterval定时器，一个300ms周期、一个500ms周期，它们的状态切换时间点完全没有同步，自然会出现同时显示的冲突情况。

要解决这个问题，核心思路就是保证同一时间永远只有一个火焰图层处于显示状态，下面给你两种可行的解决方案：

方案一：用单个定时器统一控制（推荐） #

这种方式逻辑最清晰，完全避免状态冲突，而且更符合火焰摇曳“交替切换”的需求：

首先可以简化一下你的CSS，把重复的show-1/show-2合并成一个通用的激活类：

.flames-one, .flames-two{
  display:none;
}
/* 统一用active类控制显示 */
.active {
  display:block;
}

然后修改JS代码，用单个定时器来交替切换两个火焰的显示状态：

// 初始状态：默认显示第一个火焰
const $flameOne = $(".flames-one");
const $flameTwo = $(".flames-two");

$flameOne.addClass("active");
$flameTwo.removeClass("active");

// 用单个定时器控制交替切换，间隔可以根据你想要的摇曳速度调整
setInterval(function() {
  const isOneActive = $flameOne.hasClass("active");
  if (isOneActive) {
    // 隐藏第一个，显示第二个
    $flameOne.removeClass("active");
    $flameTwo.addClass("active");
  } else {
    // 隐藏第二个，显示第一个
    $flameTwo.removeClass("active");
    $flameOne.addClass("active");
  }
}, 300); // 这里的300ms可以按需修改，数值越小摇曳越快

方案二：保留双定时器，但强制状态互斥 #

如果你坚持想要用不同的间隔（其实对于火焰摇曳效果来说不太必要），可以在每次切换时强制另一个火焰隐藏，确保状态互斥：

const $flameOne = $(".flames-one");
const $flameTwo = $(".flames-two");

// 初始状态设置
$flameOne.addClass("active");
$flameTwo.removeClass("active");

setInterval(function(){
  $flameOne.toggleClass("active");
  // 如果第一个火焰被显示，强制隐藏第二个
  if ($flameOne.hasClass("active")) {
    $flameTwo.removeClass("active");
  }
}, 300);

setInterval(function(){
  $flameTwo.toggleClass("active");
  // 如果第二个火焰被显示，强制隐藏第一个
  if ($flameTwo.hasClass("active")) {
    $flameOne.removeClass("active");
  }
}, 500);

为什么原来的代码会出问题？ #

原来的两个定时器各自独立运行，300ms和500ms的周期没有任何同步机制。比如当第一个定时器刚好把火焰1切换为显示时，第二个定时器可能也刚好把火焰2切换为显示，这就导致了两个火焰同时出现在屏幕上的情况。

通过上面的方案，我们从根源上保证了同一时间只有一个火焰处于显示状态，就能完美模拟火焰摇曳的效果了。

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