JavaScript设置延迟：实现火焰动画循环启停的方案咨询

你现在用setInterval确实会让动画一直持续切换，要实现“运行一段时间后暂停，再自动重启”的循环，用**嵌套的setTimeout**来控制启停逻辑会更灵活，刚好能解决你的需求。

核心思路 #

我们要让动画在两个状态间循环往复：

• 状态1：启动动画（每隔300ms切换火焰），持续指定时长（比如2秒）
• 状态2：暂停动画（停止切换），持续指定时长（比如1秒）
• 状态2结束后，自动回到状态1，形成无限循环

修改后的代码实现 #

先把原来的JavaScript部分替换成下面的逻辑，配置参数都放在开头，方便你按需调整：

// 可自定义的配置参数
const toggleGap = 300;        // 火焰切换的间隔（毫秒）
const runTime = 2000;         // 动画持续运行的时长（毫秒）
const pauseTime = 1000;       // 暂停的时长（毫秒）

let animationTimer; // 保存动画的定时器ID，用于后续停止动画

// 启动动画的函数
function startFlameAnimation() {
  // 开始循环切换火焰class
  animationTimer = setInterval(() => {
    $('.wrapper').toggleClass("alt");
  }, toggleGap);
  
  // 运行指定时长后，停止动画并进入暂停阶段
  setTimeout(() => {
    clearInterval(animationTimer);
    // 暂停结束后，重新启动动画
    setTimeout(startFlameAnimation, pauseTime);
  }, runTime);
}

// 页面加载完成后，启动第一次动画
$(document).ready(() => {
  startFlameAnimation();
});

代码关键点说明 #

• 用animationTimer保存setInterval的返回值，这样才能在需要停止动画时用clearInterval精准清除它。
• startFlameAnimation函数既负责启动动画，又通过嵌套的setTimeout控制了“运行→暂停→重启”的完整流程，逻辑清晰还容易调整。
• 开头的配置参数可以随便改，比如把runTime改成3000就是运行3秒，pauseTime改成1500就是暂停1.5秒，完全贴合你的需求。

完整可运行代码 #

把修改后的JS和你原来的HTML、CSS整合在一起，直接就能用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="flame-1 flames">
    <img src="https://i.imgur.com/0Pfsrdh.png" alt="">
  </div>
  <div class="flame-2 flames">
    <img src="https://i.imgur.com/EypytyC.png" alt="">
  </div>
  <div class="wrapper-img">
    <img src="https://i.imgur.com/moNtPwG.png" class="wrap-img" alt="">
  </div>
</div>

<style>
.wrapper {
  text-align: center;
  position: relative;
}
.flames, .wrapper-img, .show-1, .show-2 {
  position: absolute;
}
.flames {
  display: none;
}
.flame-1 {
  left: 38px;
  top: 32px;
}
.flame-2 {
  left: 67px;
  top: 40px;
}
.flame-2 img {
  top: 220px;
}
.wrapper-img {
  top: 220px;
}
.wrapper .flame-1 {
  display: block;
}
.wrapper .flame-2 {
  display: none;
}
.wrapper.alt .flame-1 {
  display: none;
}
.wrapper.alt .flame-2 {
  display: block;
}
</style>

<script>
// 可自定义的配置参数
const toggleGap = 300;        // 火焰切换的间隔（毫秒）
const runTime = 2000;         // 动画持续运行的时长（毫秒）
const pauseTime = 1000;       // 暂停的时长（毫秒）

let animationTimer; // 保存动画的定时器ID，用于后续停止动画

// 启动动画的函数
function startFlameAnimation() {
  // 开始循环切换火焰class
  animationTimer = setInterval(() => {
    $('.wrapper').toggleClass("alt");
  }, toggleGap);
  
  // 运行指定时长后，停止动画并进入暂停阶段
  setTimeout(() => {
    clearInterval(animationTimer);
    // 暂停结束后，重新启动动画
    setTimeout(startFlameAnimation, pauseTime);
  }, runTime);
}

// 页面加载完成后，启动第一次动画
$(document).ready(() => {
  startFlameAnimation();
});
</script>

这样就能完美实现你想要的“动一会儿、停一会儿、再继续动”的火焰动画效果啦！

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