Angular实现分段变速递增加载数值的逻辑问题

原代码的核心问题是用了固定间隔的setInterval，无法根据数值区间切换递增速度，同时逻辑存在错误（进度到50就重置为0，未处理到100的完整流程）。下面是修正后的实现方案：

实现思路 #

• 当progress处于 0-50 区间时，采用35ms的递增间隔
• 当progress进入 50-100 区间时，切换为100ms的递增间隔
• 进度达到100后可选择重置或停止（示例中采用重置循环）

修正后的完整代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-progress-bar',
  templateUrl: './progress-bar-determinate-example.html',
  styleUrls: ['./progress-bar-determinate-example.css']
})
export class ProgressBarDeterminateExampleComponent implements OnInit, OnDestroy {
  incr = 1;
  progress = 0;
  private timer: any;

  ngOnInit() {
    this.runProgress();
  }

  ngOnDestroy() {
    // 组件销毁时清理定时器，避免内存泄漏
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }

  runProgress() {
    // 根据当前进度动态计算间隔时间
    const interval = this.progress < 50 ? 35 : 100;

    this.timer = setTimeout(() => {
      this.progress += this.incr;

      // 进度到100后重置，若要停止则移除重置逻辑并取消递归调用
      if (this.progress >= 100) {
        this.progress = 0;
      }

      // 递归调用实现动态间隔的循环递增
      this.runProgress();
    }, interval);
  }
}

关键说明 #

• 用setTimeout替代setInterval，每次递增后根据当前进度重新计算下一次的间隔，实现动态速度切换
• 实现OnDestroy接口清理定时器，防止组件销毁后定时器继续运行引发内存泄漏
• 逻辑直观区分两个区间的速度规则，无需复杂的分支判断

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