Ionic+Angular记忆游戏：数字序列展示仅显示最后一个数字求助

嘿，我一眼就看出问题出在哪儿了——你的for循环是同步执行的，但动画操作是异步的，这就导致所有循环迭代几乎同时触发，前面的数字还没来得及完成显示逻辑就被后面的覆盖了，最后自然只剩最后一个数字能被看到。我来帮你重构代码，让数字能按顺序一个个显示消失！

问题根源 #

for循环会一次性跑完所有迭代，而每个迭代里的animation.play()返回的是Promise，属于异步操作。当第一个动画的then回调执行时，循环已经把i的值更新到了最后一个索引，而且所有动画几乎同时开始，前面的数字更新操作被后面的直接覆盖，最终只有最后一次迭代的数字能被渲染出来。

解决方案：用async/await让异步操作按顺序执行 #

我们可以把generateNumbers改成异步函数，用await等待每个动画序列完成后再进入下一次循环，这样就能保证数字依次显示消失了。

修正后的TypeScript函数 #

async generateNumbers(): Promise<number[]> {
  const numberArray: number[] = [];
  // 先确保初始状态是隐藏的（可选，根据你的需求调整）
  await this.animationCtrl.create()
    .addElement(this.currentNum.nativeElement)
    .duration(0)
    .fromTo('opacity', '1', '0.05')
    .play().finished;

  for (let i = 0; i < this.level; i++) {
    // 生成随机数字并更新视图
    const randomnum = Math.floor(Math.random() * 9);
    numberArray.push(randomnum);
    this.currentIndex = i;
    this.currentNumber = randomnum;
    this.parsedCurrentNumber = JSON.parse(JSON.stringify(this.currentNumber));

    // 显示数字的动画
    await this.animationCtrl.create()
      .addElement(this.currentNum.nativeElement)
      .duration(500)
      .iterations(1)
      .fromTo('opacity', '0.05', '1')
      .play().finished;

    // 等待数字显示一段时间（比如1秒，可根据需求调整）
    await new Promise(resolve => setTimeout(resolve, 1000));

    // 隐藏数字的动画
    await this.animationCtrl.create()
      .addElement(this.currentNum.nativeElement)
      .duration(500)
      .iterations(1)
      .fromTo('opacity', '1', '0.05')
      .play().finished;

    // 可选：隐藏后等待一小段时间再进行下一个
    await new Promise(resolve => setTimeout(resolve, 300));
  }

  // 最后可以恢复显示（如果需要）
  await this.animationCtrl.create()
    .addElement(this.currentNum.nativeElement)
    .duration(0)
    .fromTo('opacity', '0.05', '1')
    .play().finished;

  return numberArray;
}

改动说明 #

1. 使用async/await：将函数标记为async，用await等待每个动画的finishedPromise（Ionic的Animation.play()返回的对象有finished属性，是动画完成的Promise），确保每个步骤完成后再进行下一个。
2. 调整动画顺序：原来的逻辑是先隐藏再改数字再显示，现在改成先更新数字，再显示，等待一段时间，再隐藏，这样用户能清楚看到每个数字。
3. 同步循环执行：for循环现在会等待当前迭代的所有异步操作完成后，才进入下一次迭代，彻底解决了异步覆盖的问题。

函数调用方式不变 #

你原来的调用代码可以保持不变：

this.generateNumbers().then(val => this.numbersArray = val);

HTML部分无需改动 #

你的展示数字的HTML代码完全没问题，不需要修改：

<ion-content #currentNumber>
  <ion-label class="ion-text-center" >
    <h1>{{ parsedCurrentNumber }}</h1>
  </ion-label>
</ion-content>

这样修改后，数字就会按顺序一个个显示、停留、隐藏，不会再出现只有最后一个数字显示的问题啦！

内容的提问来源于stack exchange，提问作者Nyan