Timing of nested loops output

Question

I just started with JavaScript and I am trying to write a small open source application for fingerboard training. I nested some time loops to account for the intervals between hangtime and breaks:




  Sets: 
  

  Rounds: 
  

  Workout: 
  

  Short Break: 
  

  Long Break:

The sequence of the training is as follows: - 7 seconds workout - 3 seconds break Repeat the above six times (=60 seconds) Rest for 180 seconds Repeat all steps above five times (=5*4 minutes)

It seems like I got the sequence of the output right. The console.log() is returned in the right order. Currently however, whenever I run the script all log lines are returned immediately right after I load the page. How can I print one line every second? I experimentd with setTimeout() but couldn't get it running.

The Witness · Accepted Answer

Loops should not be used to organize time. Loop is a series of operations happening in no time, one after another.

What I would do is to use some time function: either setTimeout* or requestAnimationFrame, albeit in the latter you will have to track time in each frame yourself. Doable and probably more reliable* but for the sake of example I used setTimeout. It’s proof of concept, anyway.

What you want to do is:

Start set, and call Start round or Finish
Start round, and call Start Workout or Start the next set
Repeat 6 times:
- Work out, and 7 seconds later call Short break or Long break
- Take a short break, and 3 seconds later call Work out
Take a long break, and 180 seconds later call Start set

This is series of steps that are called in x amount of times (except for new set and new round, which are just data updates) with certain pauses in between.

Code

To not come empty handed, this is working proof of concept:



  Sets: 
  

  Rounds: 
  

  Workout: 
  

  Short Break: 
  

  Long Break:

General concept is function training that takes arbitrary object with config, data, and next step, and calls itself again with new values until condition is met (in this case number of sets finished).

I recommend against using it as delivered.

I would split it into small functions.
If after short break comes long break then probably such short break can be skipped.
Function above sometimes mutates object. This is unlikely to cause problems but maybe creating new objects when passing would be safer. Up to you.

[Edit] Working demo: https://jsfiddle.net/hmcwf0p5/1/

[Edit] Code 2

Then, I was asked if the code above can display seconds as they go. (This is a very good example why specs should be clear from the beginning; otherwise, it can result in very different implementations.)

In short, no.

In long, we could but due to nature of setTimeout this could not be accurate. I don’t even wanna go. Hence, I started thinking on different approach and came up with timeline.

Code: timeline

Idea: run timed function that does something in given interval. In our case this will be 1 second. Then, depending on our data, we should do something.

const 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;
}

What happens:

runTimeline takes an object with frames. The key is second at which something’s gonna happen and the value is array with messages to be displayed.
Inside prepareTimeline function removes all the non-numeric keys (passed as frames property) and adds last which is the biggest value plus 1 second, so we can kill setInterval.
handleFrame is a function called each second. As param it takes object with timelineId (which we can pass to clearInterval), frames, second. Inside this function we mutate this object.
- Here you can decide what you wanna do with your frame. Instead of console.logging it, you can setState of your app or whatever you find fit.
- Also, in my example it’s object of arrays but it’s up to handleFrame what is accepted.

Notation setInterval(functionName, time, ...params) will call functionName(...params) every second.

Now, let’s run it:

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

In console log, after 1 second first shows message

Initial message

Then 4 seconds later (at the same time):

Second message
And last

Workout timeline

So what’s left is to build workout frames. buildWorkoutTimeline takes params and runs a lot of nested loops (which was somewhat initial implementation). Probably could be written differently but I’ll leave it to you.

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());

Ta-dam.

* setTimeout(someFunction, 1000) will not execute 1000 milliseconds from the moment it was called but not earlier than 1000 milliseconds. So total workout might be slightly longer. requestAnimationFrame could give better results. Test it.

Timing of nested loops output

Answers (1)

Code

[Edit] Code 2

Code: timeline

Workout timeline

Related Questions