javascript - 如何修复 ClearInterval

Question

我正在开发游戏。我有带电池的板。单击“开始”后，3秒后，第一个单元格亮起，然后是下一个和下一个......但是，我希望板上只点亮一个单元格。这是我的代码:

let intervalId;
const start =  document.getElementById("start");
const reset =  document.getElementById("reset");

const cells = [].map.call(
  document.getElementsByClassName("board__box"),
  (currentValue) => currentValue
);

const cell = cells.map(cell => cell);

function setCellPosition() {
  const randomNumber = Math.round(Math.random() * 24);
  for( let j=0; j< cell.length; j++) {
    if(cell[j].getAttribute("data-row") == randomNumber && cell[j].getAttribute("data-column") == randomNumber) {
      cell[j].classList.add("check");
    }
  }
  console.log(intervalId);
}

function startInterval() {
  clearInterval(intervalId);
  intervalId = setInterval(setCellPosition, 3000);
}

start.addEventListener("click", startInterval);

HTML 代码。 div 与 board__box 类我有 25

<div class="board">
    <div class="board__box" data-row="0" data-column="0"></div>
</div>

为什么clearInterval不起作用？

Answer 1

据我所知，您正在打开您的细胞，但您从未关闭已打开的细胞。 (你永远不会删除“check”css 类)。像这样的事情:

for( let j=0; j< cell.length; j++) {
    cell[j].classList.remove("check"); // added
    if(cell[j].getAttribute("data-row") == randomNumber && cell[j].getAttribute("data-column") == randomNumber) {
      cell[j].classList.add("check");
    }   
}