CODEWITHSUNDEEP
javascriptloopswhile-loop
bcral
bcral

Reputation: 41

Basic JavaScript while loop not terminating as expected

I have a 2 JS files in my program, and one is calling a function in another file, and passing two arguments to it. No issues there - the loop on the 2nd file works as expected - until it gets to terminating. I'm doing something similar in another part of my app with no issues at all.

Code from file 1 (this loop is called from an event on the page - it returns a function so I can include the arguments without calling the function):

let loopStat = false;

let j = 0;

const sleep = (milliseconds) => {
    return new Promise(resolve => setInterval(resolve, milliseconds))
  }

const callLoop = (item) => {
    
        return function() {
            loopStat = !loopStat;
    
            loopFunc(loopStat, item);
        }
    }

const loopFunc = async (z, item) => {

        console.log('before loop', z);

        while (z == true) {
            
            console.log('inside loop', z);
  
            j++;
            
            console.log(j);

            await sleep(1000);
        }
     }
     
var button = document.getElementById('button')
button.addEventListener("click", callLoop(button));
<div id="parent">
  <button id="button">Loop</button>
</div>

Obviously "z" is used to terminate the loop in this function. I included the "console.log" bits to show what "z" is at different points. When the button is clicked again, it toggles the "loopStat" variable to false, calls the function again and sends that argument along. The weird thing is, the new argument is being sent to the function(as shown in the 'before loop' console.log), but inside the loop it changes "z" back to true, as shown in the 'inside loop' console.log.

I think it's also worth mentioning that the variables "z" and "loopStat" are not used anywhere else in the app.

I'm expecting the solution to be something obvious, and I'm suspecting it's a scope issue.

Upvotes: 0

Views: 817

Answers (1)

bcral
bcral

Reputation: 41

I guess I get to answer my own question, since no one else got it.

It turns out that the variable used as the condition for the loop needs to be DECLARED outside of the scope of the loop, and even outside of the function containing it.

var condition = false;

const callLoop = (z) => {

    //If this variable is going to be the condition for the loop, it has to
    //be declared outside of the function containing the loop.  You can't
    //just pass the argument containing the value as the condition.  
    //Obviously, you could also just use "x" as the condition, in this case. 
    condition = z;
    var j = 0;

    while (condition === true) {
        j++;
    }
}

var x = false;
const toggleLoop = () => {
    x = !x;
    callLoop(x);
}

Upvotes: 1

Related Questions