如何在Ajax请求并行时实现每0.5秒递增10%的进度条

我仔细看了你的代码，进度条停在0%不动主要是上下文绑定错误和缺少定时器控制逻辑导致的，以下是具体的修复方案：

问题分析 #

1. this指向错误：在complete里用setInterval(that.incrementProgress, 500)时，incrementProgress里的this会指向全局window，而不是你的qwData实例，所以this.progress +=10根本没修改到实例的属性。
2. 缺少进度重置与停止逻辑：没有在请求开始时重置进度为0，也没在进度到100%时停止定时器，导致要么进度从上次的数值开始，要么一直递增超过100%。
3. 定时器未持久化：没有保存定时器ID，无法在请求成功后及时停止递增。

具体修复步骤 #

1. 在请求开始时重置进度 #

修改sendData里的beforeSend回调，添加进度重置逻辑，确保每次点击按钮都从0开始：

beforeSend: function() {
  // 重置进度为0，确保每次请求都从初始状态开始
  that.progress = 0;
  // Show Chart Loading
  that.qwChart.showLoading({
    color: '#00b0f0',
    text: that.qwChartProgress
  });
  // ... 原有其他代码
}

2. 修正定时器的上下文绑定 #

修改complete里的定时器创建逻辑，用箭头函数确保incrementProgress的this指向实例，同时把定时器ID保存到实例中：

complete: function(){
  // 用箭头函数绑定上下文，同时保存定时器ID到实例
  that.progressTimer = setInterval(() => that.incrementProgress(), 500);
}

3. 完善进度递增与停止逻辑 #

更新incrementProgress方法，添加进度到100%时停止定时器的判断：

incrementProgress: function(){
  // 进度达到100%时停止定时器
  if (this.progress >= 100) {
    clearInterval(this.progressTimer);
    return;
  }
  this.progress += 10;
}

4. 请求成功后强制停止定时器 #

修改setProgressBarTo100方法，确保请求成功后立即停止定时器，避免进度继续递增：

setProgressBarTo100: function() {
  this.progress = 100;
  // 清除定时器，防止请求完成后还在递增
  clearInterval(this.progressTimer);
}

额外注意事项 #

• 确保你的setProgressBarValue方法能正确更新DOM元素的进度值，比如修改progress-bar的宽度或者value属性。
• 如果你的qwChartProgress是根据this.progress生成的百分比文本，要确保它能实时响应progress的变化。

这样修改后，每次点击Show按钮，进度条就会从0开始，每0.5秒递增10%，直到达到100%或者请求成功后直接跳到100%并停止。

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