时间戳

首页 > 解决方案 > 如何修复 ClearInterval

javascript - 如何修复 ClearInterval

问题描述

我正在开发游戏。我有带细胞的板子。单击开始后，3s 后，第一个单元格亮起，然后是下一个和下一个……但是，我希望板上只有一个单元格亮起。这是我的代码：

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 代码。board__box我有 25 个班级的 div

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

为什么 clearInterval 不起作用？

标签： javascript

解决方案

从我所见，您正在打开您的细胞，但您从未关闭已打开的细胞。（你永远不会删除“检查”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");
    }   
}

推荐阅读