javascript 带 setTimeout 的循环数组

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>

这是控制器：

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

视图上有两个按钮，第一个按钮启动灯光序列，第二个按钮是用户在灯光关闭后必须按下的按钮。当按下开始按钮时，将启动一个名为 start() 的函数并执行一个 setButton 函数，该函数禁用 de 开始按钮并启用运行按钮（当灯关闭时按下的按钮）并启动函数 startSequence 读取灯光数组并调用向灯光添加新 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);
  }
}

javascript 带 setTimeout 的循环数组

javascript loop array with setTimeout

javascript

angular

ionic-framework

ionic4