每秒添加 class，但仅持续 5 秒。 [JavaScript]

Question

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

目前我的代码如下所示：

    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();

我还想问一件事。怎么实现只有开灯后才计时运行的功能？也就是灯灭了，才开始计数。

Answer 1

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

通过添加 if statement，您可以检查是否已完成所有灯的转动 on/off。

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>

每秒添加 class，但仅持续 5 秒。 [JavaScript]

Add class every second but only for 5 seconds. [JavaScript]

html

javascript

class

settimeout

setinterval