Question

我有一段代码，它有点遵循某种模式，但我不知道如何使它成为一个循环来简化。

setTimeout(() => {
    wrapper.classList.add("show-el-1");
    wrapper.classList.add("hide-el-0");
}, 600);

setTimeout(() => {
    wrapper.classList.add("show-el-2");
    wrapper.classList.add("hide-el-1");
}, 1800);

setTimeout(() => {
    wrapper.classList.add("show-el-3");
    wrapper.classList.add("hide-el-2");
}, 3000);

setTimeout(() => {
    wrapper.classList.add("show-el-4");
    wrapper.classList.add("hide-el-3");
}, 4200);

它在每 setTimeout 持续时间内增加 1200，并更改 show-el-x 和 hide-el-y 数字。

Answer 1

这样的事情应该会让你前进

for (let i = 0; i < 4; i++) {
  const delay = 600 + (i * 1200)
  setTimeout(() => {
    wrapper.classList.add("show-el-" + (i + 1));
    wrapper.classList.add("hide-el-" + i);
  }, delay);    
}

Answer 2

您可以像这样使用 for 循环：

for(let i = 0; i < 4; i++){
    setTimeout(() => {
        wrapper.classList.add("show-el-" + (i + 1));
        wrapper.classList.add("hide-el-" + i);
    }, 600 + i * 1200);
}

Answer 3

如果您只想保持运行，即在每次超时后更新类，那么您可以采用递归方法作为下面的代码段，否则 for 循环可能是一个更具可读性和易于理解的解决方案

let newTimeout = 600;
let firstClass= 1;
const func1 = () => {
    wrapper.classList.add(`show-el-${firstClass}`);
    wrapper.classList.add(`hide-el-${firstClass -1}`);
    newTimeout += 1200;
    firstClass += 1;
    setTimeout(func1, newTimeout);
};
setTimeout(func1, newTimeout);

如何将这段 JavaScript 代码放入循环中？

3 个答案: