如何实现点击Play后.up类循环遍历div，点击Stop后停止并清除残留类

原代码问题说明 #

• 一次性注册的所有setTimeout仅会执行一轮，无法实现持续循环切换效果
• 没有保存定时器引用，点击Stop时无法取消已经排队等待执行的回调，会出现停止后样式仍自动跳转的问题
• Stop按钮逻辑冗余无效，没有正确清除所有元素上残留的.up类

实现逻辑 #

• 定义全局变量存储播放状态、当前轮播索引、定时器ID，跨函数共享状态
• Play按钮点击后先判断播放状态，避免重复点击创建多个轮播任务；每切换完一组样式后，若处于播放状态就自动安排下一组切换，到序列末尾时重置索引到0，实现无限循环
• Stop按钮点击后立即修改播放状态为停止，清除待执行的定时器，最后批量移除所有元素上的.up类，重置轮播索引

完整JS代码 #

let sequencing = [["01-01", "02-01", "03-01"],["01-02", "02-02", "03-02"],["01-03", "02-03", "03-03"],["01-04", "02-04", "03-04"]];
let isPlaying = false;
let currentIndex = 0;
let timer = null;

$("#play").on("click",function(){ 
  // 重复点击时不重复启动轮播
  if(isPlaying) return;
  isPlaying = true;
  play();
});

function play(){
  // 清除残留定时器防止冲突
  if(timer) clearTimeout(timer);
  // 清除上一组的高亮样式
  $('.up').removeClass('up');
  // 给当前组元素添加高亮样式
  sequencing[currentIndex].forEach(id => $('#' + id).addClass('up'));
  // 索引自增，到序列末尾回到0实现循环
  currentIndex = (currentIndex + 1) % sequencing.length;
  // 1秒后执行下一次切换
  timer = setTimeout(play, 1000);
}

$("#stop").on("click", function() {
  isPlaying = false;
  // 清除待执行的轮播任务
  clearTimeout(timer);
  timer = null;
  // 清除所有残留高亮样式
  $('.up').removeClass('up');
  // 重置轮播索引
  currentIndex = 0;
});

CSS样式 #

.up {
  background-color: #C00;
  color: #FFF;
}

HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id="play">Play</button>
</div>
<div>
<button id="stop">stop</button>
</div>


<div>
<div id="01-01">01-01</div>
<div id="02-01">02-01</div>
<div id="03-01">03-01</div>

<div id="01-02">01-02</div>
<div id="02-02">02-02</div>
<div id="03-02">03-02</div>

<div id="01-03">01-03</div>
<div id="02-03">02-03</div>
<div id="03-03">03-03</div>

<div id="01-04">01-04</div>
<div id="02-04">02-04</div>
<div id="03-04">03-04</div>
</div>

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