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

实现思路

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

代码

import { reactive, ref } from 'vue';

const state = reactive({
  percent: 0,
  isSuccess: false
});

const updatePercent = (callback) => {
  setTimeout(() => {
    let step = Math.ceil(Math.random() * 20);
    if (state.isSuccess) {
      step = 100 - state.percent;
    } else {
      step = state.percent + step >= 99 ? 0 : step;
    }
    state.percent += step;
    if (state.percent < 100) {
      updatePercent(callback);
    } else {
      typeof callback == 'function' && callback();
    }
  }, 500);
};

当触发生成按钮时 调用updatePercent函数

当后端数据全部返回之后 将percent的值更改为100 实现updatePercent函数停止调用

// 举例
const demo = async() => {
    try(){
        let res = await demoApi()
        if(res.code == 200){
            state.isSuccess = true
            state.percent= 100
        }
        
    }
    catch{}
}