带 setTimeout 的 javascript 循环数组

Question

我正在 Ionic 和 Angular 上开发简单的游戏，一旦一系列灯关闭，您必须按下按钮。 我有 5 列，里面有 4 个圆圈。 我想：

• 从左边开始打开每列的最后两盏灯，每列之间有两秒的延迟
• 完成后，所有灯都打开，两秒钟后所有灯都应该关闭，用户必须按下按钮。

在这点上，我已经使用 setTimeOut 和 Promise 完成了第一步，但是代码并没有等待结束灯在序列上运行关闭灯的代码行。

这是我的 html：

<ion-grid>
    <ion-row>
      <ion-col size='2' class='light-background'>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light round-1"></div>
        <div class="light round-1"></div>
      </ion-col>
      <ion-col size='2' class='light-background'>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light round-2"></div>
        <div class="light round-2"></div>
      </ion-col>
      <ion-col size='2' class='light-background'>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light round-3"></div>
        <div class="light round-3"></div>
      </ion-col>
      <ion-col size='2' class='light-background'>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light round-4"></div>
        <div class="light round-4"></div>
      </ion-col>
      <ion-col size='2' class='light-background'>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light round-5"></div>
        <div class="light round-5"></div>
      </ion-col>
    </ion-row>
  </ion-grid>

这是 controller：

// Luces a encender
  lightsList = ['.round-1', '.round-2', '.round-3', '.round-4', '.round-5'];

  // Control botones
  isReady = false;

  setButton(){
    this.isReady ? this.isReady = false : this.isReady = true;
  }

  setLightsOff() {
    console.log(`start lights off`);
  }

  startLight(light: string){
    let lights = document.querySelectorAll(light);
    console.log(`parametro entrada: ${light}`);
    
    for(let i=0; i < lights.length; i++){
      lights[i].classList.add('red-light');
    }
  }

  startSequence(){
    return new Promise(resolve => {

      this.lightsList.forEach((light, i) => {

        setTimeout(() => {
          this.startLight(light);
          console.log(`end`);
          
        }, i * 2000);

        resolve('resolved');
        
      });
      
    })
    
  }

  start(){
    this.setButton();

    this.startSequence().then(this.setLightsOff);

  }

  run(){
    this.setButton();
  }

在视图上有两个按钮，第一个按钮启动灯光序列，第二个按钮是用户在关闭灯光后必须按下的按钮。 When pressing th start button a function called start() is launched and executes a setButton function which disables de start button and enables the run button (the one to press when the lights are off) and launches the function startSequence which reads the array of lights并调用 function 将新的 class 添加到灯中，因此看起来它们已打开。

Answer 1

尝试异步等待此任务

wait(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}
async startSequence(){
  for(let light of lights) {
      await this.wait(2000);
      this.startLight(light);
  }
}