当交互需要使用进度条而后端无法提供进度数据时,前端可以参考如下实现展示任务进度。需要注意此进度不是真实的任务进度。
实现思路
- 每半秒钟生成一个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);
}