JS实现任务执行进度（非真实任务进度）

当交互需要使用进度条而后端无法提供进度数据时，前端可以参考如下实现展示任务进度。需要注意此进度不是真实的任务进度。

实现思路

• 每半秒钟生成一个0到20之间的随机数step，加上之前的进度，作为当前的进度
• 当任务未完成时，进度条最多只能跑到99%
• 当任务完成后，进度条跑到100%
• 当进度条未跑到100%时，继续更新进度
• 当进度条跑到100%时，执行回调函数

代码

// 进度条的进度，取值范围0~100
let percent = 0;
// 任务完成状态：true：完成 false：未完成
let isSuccess = false;
// 更新进度
function updatePercent(callback) {
    
    
  setTimeout(() => {
    
    
    let step = Math.ceil(Math.random() * 20);
    if (isSuccess) {
    
    
      step = 100 - percent;
    } else {
    
    
      step = percent + step >= 99 ? 0 : step;
    }
    percent += step;
    if (percent < 100) {
    
    
      updatePercent(callback);
    } else {
    
    
      typeof callback == 'function' && callback();
    }
  }, 500);
}