How do I update text while JavaScript is running?

Question

I'm trying to make a JavaScript program that simulates the game Cookie Clicker in order to calculate an optimal strategy to reach a goal as fast as possible. Essentially how it works is by the user inputting a few things through a simple website, then using a while loop to repeat through a set of functions until it has reached a goal. This program can take a while to run and I would like to display various statistics that constantly update as the program is running, but I don't know how to do this.

As an example I've made a simple calculator that shows essentially the same issue that I am having:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Summation Calculator</title>
</head>
<body>
    <h1>Summation Calculator</h1>
    <p>Calculates the sum of every number from 1 to your number.</p>
    <label for="number">Number:</label>
    <input type="number" id="number" min="0" value="1000000" step="10"><br>
    <button id="calculate" onclick="sum(number.value)">Calculate</button><br>
    <div id="output"></div>
    <script src="main.js"></script>
</body>
</html>

function sum (maxNum){
    number = 0;
    for (i = 1; i <= maxNum; i++){
        number += i;
        document.getElementById("output").innerHTML = "Total: " + number;
    }
}

I have tried using setTimeout and setInterval, but I don't really know what I'm doing and neither worked.

I made another post earlier about this, but I decided to repost because the other post didn't have any sort of example or anything. There was also another post that I looked at that had a similar problem (here) but I couldn't really modify the solution to my problem.

m-naeem66622 · Accepted Answer · 2023-05-23 02:54:03Z

Some Important Keypoints

We use setTimeout to run the chunk function after 0 ms.
This does not run the function right away, but puts it in a queue.
The queue is called the event loop and it handles async events.
The event loop runs the tasks in the queue one by one when it can.
It also updates and renders the HTML elements on the page.
Using setTimeout lets the browser show the output div before the next chunk.
If we don't use setTimeout, our code will freeze the page until it's done.

Lets use the supreme power of setTimeout

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Summation Calculator</title>
    </head>
    <body>
        <h1>Summation Calculator</h1>
        <p>Calculates the sum of every number from 1 to your number.</p>
        <label for="number">Number:</label>
        <input
            type="number"
            id="number"
            min="0"
            value="1000000"
            step="10"
        /><br />
        <button id="calculate" onclick="sum(number.value)">Calculate</button
        ><br />
        <div id="output"></div>
    </body>
    <script>
        function sum(maxNum) {
            var number = 0; // use var to declare variables
            var i = 1; // use var to declare variables
            function chunk() {
                // define a function for each chunk of work
                var count = 0; // keep track of how many iterations in this chunk
                while (count < 1000 && i <= maxNum) {
                    // limit the chunk size to 1000 iterations or maxNum
                    number += i; // add i to the sum
                    i++; // increment i
                    count++; // increment count
                }
                document.getElementById("output").innerHTML =
                    "Total: " + number; // update the output div
                if (i <= maxNum) {
                    // if there is more work to do
                    setTimeout(chunk, 0); // schedule the next chunk with zero delay
                }
            }
            chunk(); // start the first chunk
        }
    </script>
</html>

Collectives™ on Stack Overflow

How do I update text while JavaScript is running?

1 Answer 1

Some Important Keypoints

Lets use the supreme power of setTimeout

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Some Important Keypoints

Lets use the supreme power of setTimeout

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related