javascript - JS - 如何在特定时间段内随机时间重复触发函数

Question

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

为了做到这一点，我使用 JS setTimeout 方法启动两个独立的循环，并在每个循环内部生成一个随机数。但每个循环的时间不应超过 30 秒，而且按照我的方式，我无法控制它。

对于第二个循环，我必须随机触发该函数 11 次，但也将其调整为 30 秒。

进度条通过改变其宽度来移动。这些消息应该就在上面。它看起来像这样:

HTML:

<span id="progressMsg"></span>
<input type="hidden" id="progressMsgNumber">
<div class="pogress progress-info slim" id="progressBar" style="width=1%"></div>

JS:

setTimeout(progressBar, 1000);
setTimeout(progressMsn, 1000);

function progressBar() {
    barWidth = document.getElementById("progressBar").style.width.slice(0, -1); //to get number without "%" char
    if (barWidth >=100) {
        // We are done
    } else {
        minRand = 1;
        maxRand = 5;
        randSeconds = Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand;
        barWidth = Number(barWidth)+randSeconds;
        document.getElementById("progressBar").style.width = barWidth+"%";
        setTimeout(progressBar, randSeconds*1000);
    }

}

function progressMsg() {
    msgList = new array ("Msg1", "Msg2", ... "Msg11");
    barWidth = document.getElementById("progressBar").style.width.slice(0, -1);
    if (barWidth >=100) {
        // We are done
    } else {
        msgNumber = document.getElementById("progressMsgNumber").val;
        msgNumber++;
        document.getElementById("progressMsg").innerHTML = msgList[msgNumber];
        document.getElementById("progressMsgNumber").val = msgNumber;
        minRand = 1;
        maxRand = 5;
        randSeconds = Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand;
        setTimeout(progressMsg, randSeconds*1000);
    }

}

Answer 1

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

注意:下面的代码用于演示目的，其时间是您将使用的代码的 1/10，即您想要的

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

function progressMsg() {       
    const msgList = ["Msg1", "Msg2", "Msg3", "Msg4", "Msg5", "Msg6", "Msg7", "Msg8", "Msg9", "Msg10", "Msg11"],
        minRand = 100,
        maxRand = 500,
        maxTime = 3000;
    let triggers = Array.from({length:11}, () => Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand);
    triggers.forEach((n, i, a) => a[i] = (a[i-1]||0) + a[i]);
    const mult = maxTime / triggers.slice(-1);
    triggers = triggers.map(v => Math.floor(Math.ceil(v * mult)));
    
    const update = (t, i) => {
        console.log(t, Math.round(t/maxTime * 100) + '%', msgList[i]);
    }
    triggers.forEach((n, i) => setTimeout(update, n, n, i));
}
progressMsg();

使其适用于您的代码

function progressMsg() {       
    const msgList = ["Msg1", "Msg2", "Msg3", "Msg4", "Msg5", "Msg6", "Msg7", "Msg8", "Msg9", "Msg10", "Msg11"],
        minRand = 1000,
        maxRand = 5000,
        maxTime = 30000;
    // create an array of random times, e.g. 1,3,4,2,1...
    let triggers = Array.from({length:11}, () => Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand);
    // accumulate times, so we'd have e.g. 1,4,8,10,11...
    triggers.forEach((n, i, a) => a[i] = (a[i-1]||0) + a[i]);
    const mult = maxTime / triggers.slice(-1);
    // adjust so the last time is exactly maxTime
    triggers = triggers.map(v => Math.floor(Math.ceil(v * mult)));

    const update = i => {
        document.getElementById("progressMsg").innerHTML = msgList[i];
        document.getElementById("progressMsgNumber").val = i;
    }
    // start all the timeouts at once, because we have cumulative times
    triggers.forEach((n, i) => setTimeout(update, n, i));
}

function progressBar() {
    const minRand = 1000,
        maxRand = 5000,
        maxTime = 30000,
        bar = document.getElementById("progressBar");
    let time = 0;
    let triggers = [];
    // here we just keep adding random times until we reach maxTime
    while (time < maxTime) {
        triggers.push(time += Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand);
    }
    const mult = maxTime / triggers.slice(-1);
    // adjust times so last time is exactly maxTime
    triggers = triggers.map(v => Math.floor(Math.ceil(v * mult)));

    const update = t => {
        bar.style.width = (100*t/maxTime) + '%';
    }
    triggers.forEach(n => setTimeout(update, n, n));
}

<小时/>

回答评论 - 知道一切何时完成的一种方法是使用 promise

const delay = (fn, delay, ...params) => new Promise(resolve => setTimeout(fn, delay, ...params));

function progressMsg() {       
    const msgList = ["Msg1", "Msg2", "Msg3", "Msg4", "Msg5", "Msg6", "Msg7", "Msg8", "Msg9", "Msg10", "Msg11"],
        minRand = 1000,
        maxRand = 5000,
        maxTime = 30000;
    // create an array of random times, e.g. 1,3,4,2,1...
    let triggers = Array.from({length:11}, () => Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand);
    // accumulate times, so we'd have e.g. 1,4,8,10,11...
    triggers.forEach((n, i, a) => a[i] = (a[i-1]||0) + a[i]);
    const mult = maxTime / triggers.slice(-1);
    // adjust so the last time is exactly maxTime
    triggers = triggers.map(v => Math.floor(Math.ceil(v * mult)));

    const update = i => {
        document.getElementById("progressMsg").innerHTML = msgList[i];
        document.getElementById("progressMsgNumber").val = i;
    }
    // start all the timeouts at once, because we have cumulative times
    return Promise.all(triggers.map((n, i) => delay(update, n, i)));
}

function progressBar() {
    const minRand = 1000,
        maxRand = 5000,
        maxTime = 30000,
        bar = document.getElementById("progressBar");
    let time = 0;
    let triggers = [];
    // here we just keep adding random times until we reach maxTime
    while (time < maxTime) {
        triggers.push(time += Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand);
    }
    const mult = maxTime / triggers.slice(-1);
    // adjust times so last time is exactly maxTime
    triggers = triggers.map(v => Math.floor(Math.ceil(v * mult)));

    const update = t => {
        bar.style.width = (100*t/maxTime) + '%';
    }
    return Promise.all(triggers.map(n => delay(update, n, n)));
}

// usage

Promise.all([progressMsg(), progressBar()]).then(() => {
    // all done here
});