使用Renderer2生成并追加的Span出现顺序错误问题

问题描述 #

我使用setInterval实现类似RPG游戏的文本逐段打印到div的功能：当div被切换隐藏后，文本会被存储保留，重新可见时先把存储的文本追加到空div，再恢复打印。但新生成的文本却出现在之前追加的内容前方，仅短暂显示在正确位置后就移位，无法按预期追加到已存储内容之后。启动打印后切换div可见性即可复现问题。

解决方案 #

核心原因 #

问题出在依赖DOM操作存储和追加文本的逻辑，加上setInterval的异步执行，可能和Angular的变更检测机制冲突，导致文本顺序混乱。

具体修复步骤 #

• 统一文本状态管理：维护一个组件变量存储所有已打印的文本，而非依赖div的innerHTML。
• 规范定时器生命周期：div隐藏时必须清除定时器，重新显示时再创建新定时器，避免多定时器冲突。
• 同步文本更新逻辑：每次打印新字符时，先更新存储文本的变量，再同步到视图，确保顺序正确。

示例代码 #

组件类代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  show = true;
  currentText = '';
  printTimer: number | null = null;
  // 模拟需要打印的目标文本
  targetText = '欢迎来到RPG游戏！这是一段需要逐字打印的剧情文本，测试切换可见性后的打印顺序问题。';
  currentCharIndex = 0;

  startPrint() {
    // 清除已有定时器，避免重复执行
    if (this.printTimer) {
      clearInterval(this.printTimer);
    }
    // 从当前已打印的文本长度开始继续打印
    this.currentCharIndex = this.currentText.length;
    
    this.printTimer = window.setInterval(() => {
      if (this.currentCharIndex < this.targetText.length) {
        // 追加新字符到存储变量
        this.currentText += this.targetText[this.currentCharIndex];
        this.currentCharIndex++;
      } else {
        // 打印完成后清除定时器
        clearInterval(this.printTimer!);
        this.printTimer = null;
      }
    }, 120); // 控制打印速度
  }

  toggleVisibility() {
    this.show = !this.show;
    if (!this.show) {
      // 隐藏时清除定时器
      if (this.printTimer) {
        clearInterval(this.printTimer);
        this.printTimer = null;
      }
    } else {
      // 显示时恢复打印
      this.startPrint();
    }
  }
}

模板代码

<div *ngIf="show" class="text-container">{{currentText}}</div>
<button (click)="startPrint()">启动文本打印</button>
<button (click)="toggleVisibility()">切换容器可见性</button>

说明 #

通过变量currentText统一管理已打印内容，所有文本更新都基于这个变量，彻底避免了DOM操作带来的顺序问题。同时严格控制定时器的创建与清除，确保只有一个定时器在操作文本，从根源上解决了文本移位的问题。

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