如何使用含HTML元素ID的对象数组结合classList.toggle与setTimeout？

可行示例 #

先看一个正常运行的示例：点击按钮后，通过遍历对象数组，用setTimeout依次修改单个div的背景色。

HTML代码 #

<div id="step1" class="steps"></div>
<div id="step2" class="steps"></div>
<button id="btn1">示例一</button>

CSS代码 #

.steps {
  height: 50px;
  width: 50px;
  border: 1px solid black;
}

JavaScript代码 #

const step1 = document.getElementById('step1');
const btn1 = document.getElementById('btn1');
const exampleOneData = [
  {color: "blue", delay: "1000"},
  {color: "red", delay: "2000"}
]

btn1.addEventListener('click', () => {
  exampleOneData.forEach((obj) => {
    setTimeout(() => {step1.style.backgroundColor = obj.color}, obj.delay);
  });
});

这个示例通过forEach遍历对象数组，在setTimeout中调整元素样式，运行正常。

遇到的问题 #

现在尝试遍历多个div：新增按钮btn2和CSS类.red，创建存储元素ID和延迟的对象数组，但调用obj.step.classList.toggle('red')时失效——因为obj.step的值是字符串"step1"、"step2"，不是DOM元素引用，无法直接调用classList方法。

新增的CSS代码 #

.red {
  background-color: red;
}

有问题的JavaScript代码 #

const exampleTwoData = [
  {step: "step1", delay: "1000"},
  {step: "step2", delay: "2000"}
];

const btn2 = document.getElementById('btn2');
btn2.addEventListener('click', () => {
  exampleTwoData.forEach((obj) => {
    setTimeout(() => {obj.step.classList.toggle('red')}, obj.delay)
  });
 });

解决方案 #

有两种常见的解决方式：

方式一：在setTimeout中通过ID获取DOM元素 #

既然数组里存的是元素ID，就在延迟执行的回调里，用document.getElementById()把字符串ID转换成DOM元素引用：

const exampleTwoData = [
  {step: "step1", delay: "1000"},
  {step: "step2", delay: "2000"}
];

const btn2 = document.getElementById('btn2');
btn2.addEventListener('click', () => {
  exampleTwoData.forEach((obj) => {
    setTimeout(() => {
      // 通过ID获取元素后调用classList.toggle
      document.getElementById(obj.step).classList.toggle('red')
    }, obj.delay)
  });
 });

方式二：提前将DOM元素存入数组（更高效） #

如果元素不会动态新增/删除，可以提前把DOM元素对象存入数组，避免每次都调用getElementById：

// 直接存储DOM元素，而不是ID
const exampleTwoData = [
  {step: document.getElementById('step1'), delay: "1000"},
  {step: document.getElementById('step2'), delay: "2000"}
];

const btn2 = document.getElementById('btn2');
btn2.addEventListener('click', () => {
  exampleTwoData.forEach((obj) => {
    setTimeout(() => {
      obj.step.classList.toggle('red')
    }, obj.delay)
  });
 });

这两种方式都能实现按延迟依次切换不同div的red类。

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