Endless cycle within the while loop without any obvious cause

Question

Endless cycle within the while loop without any obvious cause

I've been tinkering with a timer and thanks to some feedback I received in this community, everything is running smoothly. Here's what the current version looks like for reference:

https://i.stack.imgur.com/Qd7ll.png

Here's a snippet of my code (please keep in mind that it's a work in progress and some functionalities are not fully implemented yet; any function containing alert("workin"); is still under development.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>

<title>WIP</title>
<meta charset="UFT-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>


<script>

$(document).ready(function() {
timerSet(9,12);
timerRun();
});

function timerReset() {
alert("workin");
}

function timerSet(inputMinutes, inputSeconds) {
minutes = inputMinutes;
seconds = inputSeconds;
finalTimeInSeconds = minutes*60 + seconds; //finalTimeInSeconds stores the time required to reach 00:00 on the timer in seconds.
timerPrint();
}

function timerAdd(inputMinutes, inputSeconds) {
alert("workin");
}

function timerSubtract(inputMinutes, inputSeconds) {
setTimeout(function () {
if(minutes > 0 && seconds == 0) {
minutes--;
seconds = 59;
} else {
seconds--;
}
timerPrint();
}, 1000);
}

function timerRun() {
timerSubtract();
}

function timerStop() {
alert("workin");
}

function timerPrint() {
displayMinutes = (minutes.toString().length == 2) ? minutes : "0" + minutes;//ternary operator: adds a zero at the beginning 
displaySeconds = (seconds.toString().length == 2) ? seconds : "0" + seconds;//if the number has only one character.
$("#timerText").text(displayMinutes + ":" + displaySeconds);
}

function totalTime() {
var totalTimeInSeconds = minutes*60 + seconds;

return totalTimeInSeconds; //totalTimeInSeconds represents the time displayed on the timer in seconds.
}

</script>

</head>

<body>

<div id="timerText">00:00</div>

</body>

</html>

Now here's the issue I'm facing: In the timerRun() function, I aim for the timerSubtract() function to loop as long as totalTime() > 0, but when I use a while loop, the page crashes. Why does this happen? I don't believe it's an infinite loop. Any suggestions on how I can achieve the desired functionality?

Appreciate any help or insights provided! :-)

javascript jquery html while-loop infinite-loop

Answer 1

Answer №1

The issue lies in the fact that timerSubtract accomplishes its task using setTimeout.

When you utilize setTimeout, it essentially queues up the function to be executed later. Then, when the program is idle (and enough time has passed), it executes the next queued function. By implementing a while loop, you are preventing the runtime from executing these functions scheduled with setTimeout.

One approach to rectifying this while still making use of setTimeout would be something like:

function timerRun() {
    if (minutes > 0 && seconds == 0) {
        minutes--;
        seconds = 59;
    } else {
        seconds--;
    }
    timerPrint();
    // Set up timerRun to execute again in 1 second
    setTimeout(timerRun, 1000);
}
timerRun();

Answer 2

The issue lies in the fact that timerSubtract accomplishes its task using setTimeout.

When you utilize setTimeout, it essentially queues up the function to be executed later. Then, when the program is idle (and enough time has passed), it executes the next queued function. By implementing a while loop, you are preventing the runtime from executing these functions scheduled with setTimeout.

One approach to rectifying this while still making use of setTimeout would be something like:

function timerRun() {
    if (minutes > 0 && seconds == 0) {
        minutes--;
        seconds = 59;
    } else {
        seconds--;
    }
    timerPrint();
    // Set up timerRun to execute again in 1 second
    setTimeout(timerRun, 1000);
}
timerRun();

Answer 3

Answer №2

Have you considered using setInterval instead of setTimeout in your timer function?

Check out this example on jsfiddle

setInterval(function () {
    if(minutes > 0 && seconds == 0) {
        minutes--;
        seconds = 59;
    } else {
        seconds--;
    }
    displayTimer();
}, 1000);

If you want to learn how to stop the setInterval, check out this resource: How to Stop "setInterval"

Answer 4

Have you considered using setInterval instead of setTimeout in your timer function?

Check out this example on jsfiddle

setInterval(function () {
    if(minutes > 0 && seconds == 0) {
        minutes--;
        seconds = 59;
    } else {
        seconds--;
    }
    displayTimer();
}, 1000);

If you want to learn how to stop the setInterval, check out this resource: How to Stop "setInterval"

Answer 5

Answer №3

The timerSubtract function is designed to initiate a timeout that will ultimately update the variables minutes and seconds. It does not directly modify these variables upon execution.

Running this function in a loop with the expectation of seeing immediate changes in the variables will not work as intended due to JavaScript's single-threaded nature. The browser needs to yield control back in order for timeout events to be processed. Otherwise, the loop will block the execution of timeouts.

If JavaScript supported multi-threading, the loop could potentially spawn numerous timeouts rapidly, causing unpredictable results. Instead, utilizing a single setInterval within timerSubtract ensures consistent countdown behavior:

function timerSubtract(inputMinutes, inputSeconds) {
    setInterval(function() {
        if (minutes > 0 && seconds == 0) {
            minutes--;
            seconds = 59;
        } else {
            seconds--;
        }
        timerPrint();
    }, 1000);
}

function timerRun() {
    timerSubtract();
}

Answer 6

The timerSubtract function is designed to initiate a timeout that will ultimately update the variables minutes and seconds. It does not directly modify these variables upon execution.

Running this function in a loop with the expectation of seeing immediate changes in the variables will not work as intended due to JavaScript's single-threaded nature. The browser needs to yield control back in order for timeout events to be processed. Otherwise, the loop will block the execution of timeouts.

If JavaScript supported multi-threading, the loop could potentially spawn numerous timeouts rapidly, causing unpredictable results. Instead, utilizing a single setInterval within timerSubtract ensures consistent countdown behavior:

function timerSubtract(inputMinutes, inputSeconds) {
    setInterval(function() {
        if (minutes > 0 && seconds == 0) {
            minutes--;
            seconds = 59;
        } else {
            seconds--;
        }
        timerPrint();
    }, 1000);
}

function timerRun() {
    timerSubtract();
}

Answer 7

Answer №4

Like Jonathan mentioned, utilizing setInterval is the way to go. To enhance his suggestion, I recommend incorporating clearInterval() function to halt the countdown at 0 (assuming that's your goal). Here's an improved version of the code:

function timerSubtract(inputMinutes, inputSeconds) {
    var countdown = setInterval(function () {
        if(minutes > 0 && seconds == 0) {
            minutes--;
            seconds = 59;
        } else {
            seconds--;
        }

        if( totalTime() <= 0){
            clearInterval(countdown);
            // The timer has ended, perform additional actions...
        }

        timerPrint();
    }, 1000);
}

Furthermore, it's worth noting that over time the timer may lose accuracy. For more precise timing, consider fetching the current system time when starting the timer, then upon each interval, retrieve the current time again and calculate the difference between the two values (current - start) to determine the actual elapsed time. Afterwards, deduct the elapsed time from the initial total to obtain the remaining time.

Answer 8

Like Jonathan mentioned, utilizing setInterval is the way to go. To enhance his suggestion, I recommend incorporating clearInterval() function to halt the countdown at 0 (assuming that's your goal). Here's an improved version of the code:

function timerSubtract(inputMinutes, inputSeconds) {
    var countdown = setInterval(function () {
        if(minutes > 0 && seconds == 0) {
            minutes--;
            seconds = 59;
        } else {
            seconds--;
        }

        if( totalTime() <= 0){
            clearInterval(countdown);
            // The timer has ended, perform additional actions...
        }

        timerPrint();
    }, 1000);
}

Furthermore, it's worth noting that over time the timer may lose accuracy. For more precise timing, consider fetching the current system time when starting the timer, then upon each interval, retrieve the current time again and calculate the difference between the two values (current - start) to determine the actual elapsed time. Afterwards, deduct the elapsed time from the initial total to obtain the remaining time.

Endless cycle within the while loop without any obvious cause

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

jQuery fieldset.change is a feature that allows you to manipulate

Sorting data by percentages in AngularJS

Solving filtering issues within React using a combination of conditions

Display the Sencha Touch Picker with the previously selected option showing

I am sending an AJAX request to a remote server in order to retrieve access records

Unable to fetch permissions for user:email via GitHub API

MongoDB Client > Error: No operations provided - cannot proceed

The user's input is not being accurately represented when making an AJAX request to the

What is causing the failure of success function commands to be executed?

Determine the number of input tags within a div element by utilizing the closest property in jQuery

Hiding the overflow conceals the entire image in one direction, while leaving the other exposed

"Exploring the world of CSS3: Arrow shapes and animated effects

Enhance your mouse movement for optimal efficiency

Can someone explain the distinction between 'return item' and 'return true' when it comes to JavaScript array methods?

JSON nested error: Cannot read property 'length' of undefined

Retrieving ng-model using ng-change in AngularJS

The button I have controls two spans with distinct identifiers

Create a list using ng-repeat in AngularJS, each item separated by "custom categories"

Is there a way to manipulate the placement of an image within a div using CSS?

Can you explain the distinctions among “assert”, “expect”, and “should” in the Chai framework?