用于进度条的多个顺序递归javascript函数

我需要使用不同的“百分比”参数重复调用递归函数，以便它们连接到前端的进度条中。例如，我需要使用以下百分比调用函数五次：

进展（21）；进展（42）；进展（64）；进展（85）；进展（100）

我可以让我的进度条显示
（21,42,64,85,100）
，但我希望每个函数调用的进度条从
（0-21,22-42,43-64,65-85,86-100）

如果它在下一次函数调用之前没有完成它的段，那么就可以了。例如，
0-18、22-40、43-56等

function progress(percent) {
  console.log(percent);

  $('.progress-bar span').css({
    width: percent + '%'
  });
  $('.progress-percent-done').text(percent + '%');

  var timeout = 500;
  if (percent < 100) {
    setTimeout(function () {
      progress(percent);
    }, timeout);
  }
}


//excerpt showing how progress function is called
beforeSend: function () {
    var batch_remainder = Math.max(0, ((batch_count + 1) * batch_size) - total_count);
    var percent = Math.round(((((batch_count + 1) * batch_size) - batch_remainder) / total_count) * 100);
    progress(percent);
...

如果它必须在上端等待，直到下一个函数调用，这是可以的。比如说,

0-21
（在下一次函数调用之前完成并等待），
22-42、43-64
等

function progress(percent) {
  console.log(percent);

  $('.progress-bar span').css({
    width: percent + '%'
  });
  $('.progress-percent-done').text(percent + '%');

  var timeout = 500;
  if (percent < 100) {
    setTimeout(function () {
      progress(percent);
    }, timeout);
  }
}


//excerpt showing how progress function is called
beforeSend: function () {
    var batch_remainder = Math.max(0, ((batch_count + 1) * batch_size) - total_count);
    var percent = Math.round(((((batch_count + 1) * batch_size) - batch_remainder) / total_count) * 100);
    progress(percent);
...

功能进度（百分比）{
控制台日志（百分比）；
$（'.progress bar span'）.css({
宽度：百分比+“%”
});
$（'.progress percent done'）.text（percent+'%'）；
var超时=500；
如果（百分比<100）{
setTimeout（函数（）{
进度（百分比）；
}，超时）；
}
}
//显示如何调用进度函数的摘录
beforeSend:函数（）{
var批次剩余=数学最大值（0，（（批次计数+1）*批次大小）-总计数）；
变量百分比=数学舍入（（（（批次计数+1）*批次大小）-批次剩余数/总计数）*100）；
进度（百分比）；
...
您可以通过使用承诺来实现这一点，如下所示：

function progress(percent) {
  console.log(percent);

  $('.progress-bar span').css({
    width: percent + '%'
  });
  $('.progress-percent-done').text(percent + '%');

  return new Promise(function(resolve) {
    var timeout = 500;
    if (percent < 100) {
      setTimeout(function () {
        percent++; // Increment percent
        progress(percent);
      }, timeout);
    }
    else {
        resolve()
    }
  })

}

progress(21).then(function() {      
  return progress(42); 
})
.then(function() {
  return progress(64); 
})
.then(function() {
  return progress(85); 
})
.then(function() {
  return progress(100);
})

功能进度（百分比）{
控制台日志（百分比）；
$（'.progress bar span'）.css({
宽度：百分比+“%”
});
$（'.progress percent done'）.text（percent+'%'）；
返回新承诺（函数（解析）{
var超时=500；
如果（百分比<100）{
setTimeout（函数（）{
百分比+++；//增量百分比
进度（百分比）；
}，超时）；
}
否则{
解决（）
}
})
}
进程（21）。然后（函数（）{
返回进度（42）；
})
.然后（函数（）{
返回进度（64）；
})
.然后（函数（）{
返回进度（85）；
})
.然后（函数（）{
返回进度（100）；
})
您可以通过css
transition
属性从n转到n，然后设置一个特定的持续时间。在
progress
函数中，您永远不会更改
percent
的值，这意味着您每次都用相同的值调用此函数。@AbanaClara嗨，是的，我已经在这样做了。@Titus
percent
是代码另一部分中可用的数字。每次
百分比
数字可用时，我想调用
进度
函数，让前端的进度条无缝移动到100%。当“百分比”出现时，我在代码的另一部分调用进度函数号码变为可用。您可以显示如何调用
progress（）
并从代码的另一部分传递
percent
吗？我刚刚对上面的主要问题添加了一个编辑。说需要先进行同行评审，所以不确定它是否为您显示。还显示了
percent
变量。（别笑了，这是一个奇怪的计算）。看不到更新-你更新了你的问题，还是我的答案？我把它放在问题里了。我试着把它放在这里。