每秒添加课程，但仅持续 5 秒。 [JavaScript]答案

【问题标题】：Add class every second but only for 5 seconds. [JavaScript]每秒添加课程，但仅持续 5 秒。 [JavaScript]
【发布时间】：2021-07-13 10:02:40
【问题描述】：

我想创建一个每秒添加一个类的函数，但 5 秒后该函数将结束。这个函数应该为五个灯之一添加一个活动类。

我现在的代码是这样的：

    const lights = document.querySelectorAll('.light');

    let active = true;

    const headFunction = () => {
        lightsFunction();
    }

    const lightsFunction = () => {
        if (active) {
            for (let i = 0; i < lights.length; i++) {
                lights[i].classList.add('on');
            }
        } else {
            for (let i = 0; i < lights.length; i++) {
                lights[i].classList.remove('on');
            }
        }
    }
    headFunction();

我还想问一件事。如何让计时功能只有在开灯完成后才运行？也就是说，灯熄灭，然后才开始计数。

【问题讨论】：

您有 5 盏灯 - 据我了解，第一盏灯应该亮一秒钟然后关闭，然后第二盏灯应该亮一秒钟，依此类推。它是否正确？如果是这样，可能有一种更简单的方法可以在没有 JS 的情况下做到这一点。你能告诉我们你的 CSS 吗？
第一秒过去了，第一盏灯亮并一直亮着，然后再过一秒，下一个灯亮。当最后一盏灯亮起时，它们全部熄灭，时间开始倒计时。

标签： javascript html class settimeout setinterval

【解决方案1】：

您可以使用 setTimeout 和不同的延迟来添加和删除类。

通过添加if statement，您可以检查是否已完成所有灯的开/关。

const LIGHT_ACTIVE_CLASS = 'light--on';
const ACTIVE_TIME = 1000; // milliseconds

const lights = document.querySelectorAll('.light');

const turnAllLightsOff = (lights) => {
  lights.forEach((light) => {
    light.classList.remove(LIGHT_ACTIVE_CLASS);
  });
}

lights.forEach((light, index) => {
  // Turn light on
  setTimeout(() => {
    light.classList.add(LIGHT_ACTIVE_CLASS);
    
    // Check if it's the last light
    if(index === lights.length - 1) {
      // Wait a bit before turning the lights off
      setTimeout(() => {
        // Turn all lights off
        turnAllLightsOff(lights);
        
        console.log('Finished...');
      }, ACTIVE_TIME);
    }
  }, index * ACTIVE_TIME);
});

.light {
  width: 2rem;
  height: 2rem;
  background: grey;
  display: inline-block;
  margin: 0 0.5em 0 0;
}

.light--on {
  background: yellow;
  box-shadow: 0 0 1rem yellow;
}

<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>

如果您想一次显示一盏灯：

const LIGHT_ACTIVE_CLASS = 'light--on';
const ACTIVE_TIME = 1000; // milliseconds

const lights = document.querySelectorAll('.light');

lights.forEach((light, index) => {
  // Turn light on
  setTimeout(() => {
    light.classList.add(LIGHT_ACTIVE_CLASS);
  }, index * ACTIVE_TIME);
  
  // Turn light off
  setTimeout(() => {
    light.classList.remove(LIGHT_ACTIVE_CLASS);
    
    // Check if it's the last light
    if(index === lights.length - 1) {
      console.log('Finished...');
    }
  }, (index * ACTIVE_TIME) + ACTIVE_TIME);
});

.light {
  width: 2rem;
  height: 2rem;
  background: grey;
  display: inline-block;
  margin: 0 0.5em 0 0;
}

.light--on {
  background: yellow;
  box-shadow: 0 0 1rem yellow;
}

<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>

【讨论】：

看起来不错，但我想我误解了我的意思。 1 秒过去了，第一个灯亮并一直亮着，然后下一个灯和下一个灯都亮（然后都亮），依此类推，直到最后一个灯亮。（这里将设置另一个 1-2 秒的 setTimeout 以看到所有 5 个都亮起）然后它们都熄灭了。
@DARKVerbalCentaurPL 我添加了一个额外的 sn-p，现在可以这样做