Javascript 嵌套循环输出的计时_Javascript_While Loop

Javascript 嵌套循环输出的计时

javascript

Javascript 嵌套循环输出的计时,javascript,while-loop,Javascript,While Loop,我刚开始使用JavaScript，我正在尝试为fingerboard培训编写一个小型开源应用程序。我嵌套了一些时间循环，以说明挂起时间和休息时间之间的间隔： <html> <body> Sets: <input type="number" id="setsIN" value="5"> <br> Rounds: <input type="number" id="roundsIN" value="6"> <br>

我刚开始使用JavaScript，我正在尝试为fingerboard培训编写一个小型开源应用程序。我嵌套了一些时间循环，以说明挂起时间和休息时间之间的间隔：

<html>

<body>
  Sets: <input type="number" id="setsIN" value="5">
  <br>
  Rounds: <input type="number" id="roundsIN" value="6">
  <br>
  Workout: <input type="number" id="hangIN" value="7">
  <br>
  Short Break: <input type="number" id="shortbreakIN" value="3">
  <br>
  Long Break: <input type="number" id="longbreakIN" value="180">
  <br>

  <hr>

  <script>
    // Import values
    var setsNUMBER = parseInt(document.getElementById("setsIN").value);
    var roundsNUMBER = parseInt(document.getElementById("roundsIN").value);
    var hangTIME = parseInt(document.getElementById("hangIN").value);
    var shortbreakTIME = parseInt(document.getElementById("shortbreakIN").value);
    var longbreakTIME = parseInt(document.getElementById("longbreakIN").value);
    console.log("Sets: " + setsNUMBER)
    console.log("Rounds: " + roundsNUMBER)
    console.log("Hang: " + hangTIME)
    console.log("Short breaks: " + shortbreakTIME)
    console.log("Long breaks: " + longbreakTIME)
    // calculate duration
    var duration = ((hangTIME + shortbreakTIME) * roundsNUMBER + longbreakTIME) * setsNUMBER
    console.log("Duration (minutes): " + duration/60)
    // Counter
    var setsCOUNT = 1; // Start counting at 1
    var roundsCOUNT = 1; // Start counting at 1
    var hangCOUNT = 1; // Start counting at 1
    var shortbreakCOUNT = 1; // Start counting at 1
    var longbreakCOUNT = 1; // Start counting at 1
/////////////////////////////////////////////////////////////////

  // Sets
  while (setsCOUNT < setsNUMBER+1) {
    console.log("Set: "+ setsCOUNT)
    setsCOUNT++;
    roundsCOUNT = 1;
    longbreakCOUNT = 1;
    // Rounds
      while (roundsCOUNT  < roundsNUMBER+1) {
        console.log("Round: "+ roundsCOUNT)
        roundsCOUNT++;
        hangCOUNT = 1;
        shortbreakCOUNT = 1;
        // HAngtime
          while (hangCOUNT  < hangTIME+1) {
            console.log("WorkOutTime: "+ hangCOUNT)
            hangCOUNT++;
          }
        // Pausetime
         while (shortbreakCOUNT  < shortbreakTIME+1) {
           console.log("ShortBreak: "+ shortbreakCOUNT)
           shortbreakCOUNT++;
         }
          }
          // LongBreak
           while (longbreakCOUNT  < longbreakTIME+1) {
             //console.log("longBreak: "+ longbreakCOUNT)
             longbreakCOUNT++;
      }
  }

  </script>

</html>


设置：


轮次：


训练：


短暂休息：


长假：



//导入值
var setsNUMBER=parseInt（document.getElementById（“setsIN”）.value）；
var roundsNUMBER=parseInt（document.getElementById（“roundsIN”）.value）；
var hangTIME=parseInt（document.getElementById（“hangIN”）.value）；
var shortbreakTIME=parseInt（document.getElementById（“shortbreakIN”）.value）；
var longbarktime=parseInt（document.getElementById（“longbarkin”）.value）；
console.log（“集合：+setsNUMBER）
console.log（“轮数：+roundsNUMBER）
控制台日志（“挂起：+挂起时间）
日志（“短中断：+shortbreakTIME”）
console.log（“长中断：+longbreakTIME）
//计算持续时间
var持续时间=（（挂起时间+短中断时间）*轮数+长中断时间）*设置数
console.log（“持续时间（分钟）：”+持续时间/60）
//柜台
var setsCOUNT=1；//1点开始计数
var roundScont=1；//1点开始计数
var hangCOUNT=1；//1点开始计数
var shortbreakCOUNT=1；//1点开始计数
var LongbarkCount=1；//1点开始计数
/////////////////////////////////////////////////////////////////
//设置
同时（设置计数<设置编号+1）{
console.log（“Set:+setscont）
设置计数++；
RoundScont=1；
LongbarkCount=1；
//轮
while（循环次数<循环次数+1）{
console.log（“Round:+roundScont）
RoundScont++；
悬挂次数=1；
短断计数=1；
//上吊时间
同时（挂起次数<挂起时间+1）{
console.log（“WorkOutTime:+hangCOUNT”）
hangCOUNT++；
}
//暂停时间
而（shortbreakCOUNT


培训的顺序如下：
-7秒训练
-3秒休息
重复上述六次（=60秒）
休息180秒
重复上述所有步骤五次（=5*4分钟）
看来我把输出的顺序弄对了。console.log（）
以正确的顺序返回。但是，当前，每当我运行脚本时，所有日志行都会在加载页面后立即返回。如何每秒打印一行？我尝试了setTimeout（）
，但无法运行它。
循环不应用于组织时间。循环是一系列在短时间内相继发生的操作
我要做的是使用一些时间函数：要么setTimeout
*要么requestAnimationFrame
，尽管在后者中，您必须自己跟踪每个帧中的时间。可行而且可能更可靠*但为了示例起见，我使用了setTimeout
。无论如何，这是概念的证明
您要做的是：

开始设置，并调用开始轮或结束轮
开始一轮训练，然后调用开始训练或开始下一轮训练
重复6次：

锻炼身体，7秒后叫短休息或长休息
休息一会儿，3秒钟后打电话给健身中心

长时间休息，180秒后调用Start set

这是一系列的步骤，它们被调用了x次（除了newset和newround，它们只是数据更新），中间有一些停顿
代码
为避免空手而来，这是有效的概念证明：

设置：


轮次：


训练：


短暂休息：


长假：



常量setsNUMBER='setsNUMBER'；
const roundsNUMBER='roundsNUMBER'；
常量hangNUMBER='hangNUMBER'；
常量挂起时间=‘挂起时间’；
const shortbreakTIME='shortbreakTIME'；
const longbarktime='longbarktime'；
常量setscont='setscont'；
const roundscont='roundscont'；
const hangCOUNT='hangCOUNT'；
const shortbreakCOUNT='shortbreakCOUNT'；
const longbarkcount='longbarkcount'；
函数培训（{config，data，next:current}）{
开关（电流）{
案例设置计数：{
if（数据[setsCOUNT]<配置[setsNUMBER]）{
const updated setscont=数据[setscont]+1；
log（`Set:${updatedSetsCOUNT}`）；
训练({
配置，
数据：{
…数据，
[设置计数]：更新的设置计数，
[RoundScont]：0，
},
下一个：RoundScont，
});
}否则{
console.log（“结束了，这是一次很好的锻炼，兄弟！”）；
}
打破
}
案例综述：{
如果（data.roundScontconst prepareTimeline = (possibleTimeline) => {
    const sortedFrames = Object.keys(possibleTimeline)
        .map(Number)
        .filter((number) => !Number.isNaN(number))
        .sort((a, b) => a - b);

    return Object.assign(
        sortedFrames.reduce(
            (acc, number) => Object.assign(acc, { [number]: possibleTimeline[number] }),
            {}
        ),
        { last: Math.max(...sortedFrames) + 1 }
    );
}

const handleFrame = (data) => {
    const { second, frames, frames: { last }, timelineId } = data;

    if (second == last) {
        return clearInterval(timelineId);
    }

    if (frames[second]) {
        frames[second].forEach((message) => {
            console.log(message);
        });
    }

    data.second = second + 1;
};

const runTimeline = (frames) => {
    const timelineObject = {
        second: 0,
        frames: prepareTimeline(frames),
        timelineId: null,
    }

    const timelineId = setInterval(handleFrame, 1000, timelineObject);
    timelineObject.timelineId = timelineId;
}

runTimeline({
    1: ['Initial message'],
    5: ['Second message', 'And last'],
});

Initial message

Second message
And last

const buildWorkoutTimeline = ({
    sets = 3,
    rounds = 5,
    workouts = 6,
    workoutTime = 7,
    pauseTime = 3,
    restTime = 180,
} = {}) => {
    let seconds = 0;
    const workoutTimeline = { [seconds]: [] };

    for (let set = 1; set <= sets; set++) {
        workoutTimeline[seconds].push(`New set: ${set}`);
        for (let round = 1; round <= rounds; round++) {
            workoutTimeline[seconds].push(`Set ${set}’s new round: ${round}`);
            for (let workout = 1; workout <= workouts; workout++) {
                seconds += 1;
                workoutTimeline[seconds] = [`Set ${set}, round ${round}’s new workout: ${workout}`];
                for (let time = 0; time < workoutTime; time++) {
                    seconds += 1;
                    workoutTimeline[seconds] = [`Seconds: ${workoutTime - time}`];
                }

                if (workout < workouts) {
                    seconds += 1;
                    workoutTimeline[seconds] = ['Short break'];
                    for (let time = 0; time < pauseTime; time++) {
                        seconds += 1;
                        workoutTimeline[seconds] = [`Seconds: ${pauseTime - time}`];
                    }
                } else if (round < rounds) {
                    seconds += 1;
                    workoutTimeline[seconds] = ['Long break'];
                    for (let time = 0; time < restTime; time++) {
                        seconds += 1;
                        workoutTimeline[seconds] = [`Seconds: ${restTime - time}`];
                    }
                }
            }
        }
    }

    seconds += 1;
    workoutTimeline[seconds] = [
        'Workout finished',
        `Total time: ${(seconds / 60) | 0} minutes, ${seconds % 60} seconds`
    ];

    return workoutTimeline;
};

runTimeline(buildWorkoutTimeline());