Javascript JS-如何在一定时间内随机重复激发函数

我想模仿进度条获得随机长度添加0%到100%，以一定的顺序显示一系列消息，但也在随机时间

为了做到这一点，我使用JS setTimeout方法启动了两个独立的循环，每个循环内部都有一个随机数。但是每个循环不应该超过30秒，以我的方式我无法控制

对于第二个循环，我必须随机启动该函数11次，但也要将其设置为30秒

进度条通过更改其宽度来移动。信息应该就在上面。看起来是这样的：

HTML:

---

你可以将你的函数包装成Promise，再加上一个Promise，在30秒内解析它自己，然后使用Promise.race

---

请参见

您可以将所花费的全部时间和显示的消息数存储在变量中

let spentTime = 0; // Declare 
let displayedMessages = 0; 
function progressMsg() {
    ....
        setTimeout(() => { // Edit 
          progressMsg();
          spentTime += randSecods; // add the seconds of this tick
          displayedMessages++;
        }, randSeconds*1000);
    }

}

然后，您可以使用它来更改花费的时间和留下的消息上传递的任何刻度中的最小值和最大值 差不多

maxSeconds = (fullTime - spentTime) / (numOfMessages - displayedMessages)

---

将确保显示所有消息，您也可以更改最小值，使其看起来更自然。

关键是事先创建所有随机时间，然后您可以以确保总时间精确为30秒的方式操纵时间

注意：下面的代码，出于演示目的，是您将使用的代码的十分之一倍，即您想要的代码

        minRand = 1000,
        maxRand = 5000,
        maxTime = 30000;

函数progressMsg{ 常量msgList=[Msg1、Msg2、Msg3、Msg4、Msg5、Msg6、Msg7、Msg8、Msg9、Msg10、Msg11]， minRand=100， maxRand=500， 最大时间=3000； 让triggers=Array.from{length:11}，=>Math.floorMath.random*maxRand-minRand+1+minRand； triggers.forEachn，i，a=>a[i]=a[i-1]| | 0+a[i]； const mult=maxTime/triggers.slice-1； triggers=triggers.mapv=>Math.floorMath.ceilv*mult； 常数更新=t，i=>{ console.logt、Math.roundt/maxTime*100+'%'，msgList[i]； } triggers.forEachn，i=>setTimeoutupdate，n，n，i； }

---

progressMsg；你需要做的是将30秒随机分成一系列数字-如果你知道有多少条消息，那么如果OP需要第二个随机循环来显示所有11条消息，那么这有什么帮助呢？如果你得到的随机秒数是4,5,4,5,4,5,5,3-那么在11条消息中只有7条之后，你已经达到30秒了？@JaromandaX我们的想法是限制最大随机秒数，以防止实际使用所花费的时间和要显示的消息数。例如，我建议的代码maxSeconds=fullTime-spentTime/numfmessages-displayedMessages将在第一个刻度处设置最大限制为2.7 30/11，如果随机数都是最大值，则序列将为2.7、2.7、2.7、…、2.7是的，当然，但随机数是随机的，因此，您可以很容易地找到最后4或5条消息的间隔非常小的情况：p@JaromandaX我想如果这是个问题，那么我们就忽略了随机数的意义，事实上，最后一行是一个例子，使用花费的时间和留下的信息，你可以通过任何你喜欢的逻辑来阻止。我想我看不太清楚你的逻辑：pI非常欣赏你的解决方案，感谢你的解释，预先创建所有的随机时间是goSorry的方法，是否有任何回调或某种指示，我可以告诉你，这两个循环都已完成？我在使用letTranspile it的旧浏览器上遇到兼容性问题。。。巴别塔

maxSeconds = (fullTime - spentTime) / (numOfMessages - displayedMessages)

        minRand = 1000,
        maxRand = 5000,
        maxTime = 30000;