Problem with a loop, function, fitness app, counter, attempting to understand/learn

JavaScript
1

A little context:
I’ve been trying to get used to reading docs.

I started to make a small fitness app project that will run through an array of set times and show a visual countdown timer.

(Id like to avoid AI help and tutorials for this project)

The code below is not the full project, but shows the current problem I’m trying to solve.

What I want this code to do:
Using a loop:

  1. set count to item in position i in the array
  2. run test() every second until count reaches zero
    (“test” will decrement count every second)

example:

  • i should start at position zero of the array
    console should show: i = 0 , set count = 3
  • test() should then run:
    console should show: 3 , 2 , 1, count = 0
  • i should then change to 1
    console should show: i = 1

What the code is currently doing:
The loop seems to run through the array first, then run test()
Console shows:
i = 0 , set count: 3 , i = 1 , i = 2 , i = 3 ,
3 , 2 , 1 , count = 0

If I do not “set count” in the IF statement, count is set to the last item in the array 7

I’m trying to understand why the loop does not run test() between incrementing i

I attempted to use a while loop instead of a for loop, but had the same results.

Code:
(to make it more convenient for people to test, I’ve combine the three files into one HTML doc)

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		body {
    			margin: 0px;
    			background-color: green;
		}
	    </style>
    </head>
    <body> 
        <script>
    let interval;
    const arr = [3, 5, 10, 7];
    let count = 0;

    //Why is this loop increasing value i before makeInt() has a chance to run?
    for (let i = 0; i < arr.length; i++) {
        console.log("i = ", i);

    //count is zero
        if (count === 0) {
        //The count is set to 3
            count = arr[i];
            console.log("set count: ", count);
        //makeInt() should run the "test" function here, before i is incremented???
            makeInt();
        }
    }

    function test() {
        if (count !== 0) {
            console.log(count);
            count--
        } else {
            console.log("count = ", count);
            clearInt();
        }   
    }

    function makeInt() {
        if (!interval) {
            interval = setInterval(test, 1000)    
        }  
    }

    function clearInt() {
        clearInterval(interval);
    }
	    </script>
    </body>
</html>
2

you can use a recursive approach or setTimeout() to delay the next iteration until makeInt() finishes. Here’s a modified version using setTimeout():

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: green;
        }
    </style>
</head>
<body>
<script>
    let interval;
    const arr = [3, 5, 10, 7];
    let count = 0;
    let i = 0;

    function startLoop() {
        console.log("i = ", i);

        if (count === 0) {
            count = arr[i];
            console.log("set count: ", count);
            makeInt();
        }

        i++;

        if (i < arr.length) {
            setTimeout(startLoop, 1000);
        }
    }

    startLoop();

    function test() {
        if (count !== 0) {
            console.log(count);
            count--;
        } else {
            console.log("count = ", count);
            clearInt();
        }
    }

    function makeInt() {
        if (!interval) {
            interval = setInterval(test, 1000);
        }
    }

    function clearInt() {
        clearInterval(interval);
    }
</script>
</body>
</html>

This code will iterate through the array and run makeInt() before incrementing i, ensuring that the test() function is called as desired.

i hope it will be helpful for you.

1 Like
3

I will try playing with setTimeout and recursion to see if I can get them to work.
However I’m not quite sure why the interval timer is not running in this example?

Once the programme is completed the console should read:
i = 0
set count: 3
3
2
1
count = 0

i = 1
set count: 5
5
4
3
2
1
count = 0

i = 2
set count: 10
etc…

4

Thank you @Danishhafeez :slight_smile:

After setting setTimeout() to a variable I was able to change the variable to be sure the count finished.
Very excited to try this in my final project :laughing:

function startLoop() {
        console.log("i = ", i);

        if (count === 0) {
            count = arr[i];
            console.log("set count: ", count);
            makeInt();
        }

        let delay;
        delay = arr[i] *1000;
        i++;

        if (i < arr.length) {
            setTimeout(startLoop, delay);
        }
    }
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.