Angular DevExtreme进度条问题：如何实现5秒连续无卡顿进度

问题原因 #

你当前的实现使用1秒间隔的setInterval，每次将进度值跳变1个单位，视觉上会产生停顿感。要实现连续流畅的进度效果，需要缩短更新间隔、细化进度值的变化步长。

解决方案 #

通过毫秒级的时间追踪和高频次的进度更新，模拟连续动画效果：

修改后的HTML代码

<dx-progress-bar
  #progressBar
  [showStatus]="false"
  id="progress-bar-status"
  [rtlEnabled]="true"
  [class.complete]="progressBar.value >= maxValue"
  [min]="0"
  [max]="maxValue"
  [value]="currentProgress"
>
</dx-progress-bar>

<button (click)="onButtonClick()">启动进度</button>

修改后的TS代码

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  maxValue = 5;
  totalDuration = 5000; // 总时长5秒（单位：毫秒）
  elapsedTime = 0;
  currentProgress = 0;
  intervalId: number | null = null;

  onButtonClick() {
    // 重置进度状态
    this.elapsedTime = 0;
    this.currentProgress = 0;
    
    // 清理旧定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }

    // 每16ms更新一次（接近60fps，保证视觉流畅）
    this.intervalId = window.setInterval(() => {
      this.elapsedTime += 16;
      
      // 计算连续进度值
      this.currentProgress = (this.elapsedTime / this.totalDuration) * this.maxValue;
      
      // 进度完成时停止定时器
      if (this.currentProgress >= this.maxValue) {
        this.currentProgress = this.maxValue;
        clearInterval(this.intervalId!);
        this.intervalId = null;
      }
    }, 16);
  }

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

关键修改说明 #

• 用elapsedTime追踪已流逝的毫秒数，代替原来的整数秒变量，实现更精细的进度控制
• 将定时器间隔从1000ms改为16ms，每秒更新约60次，视觉上达到连续动画效果
• 通过比例计算currentProgress，让进度值平滑过渡，避免跳变
• 增加组件销毁时的定时器清理逻辑，防止内存泄漏
• 调整complete类的判断条件为>=，确保进度完成时正确触发样式

内容的提问来源于stack exchange，提问作者John w.