Trying to run a while loop for a specified amount of time...Not exiting

Question

So, I have a localhost website where you can press a button to start a while loop. My intent is to loop through this while loop and "wait" for button clicks from the additional buttons, until 135 seconds have passed. Then, it is supposed to exit the loop. When the code (which is embedded in html) is executed, it only gets to printing "test1", while failing to leave the loop and print test2.

        allyTrack = 0;
        scaleTrack = 0;
        enemyTrack = 0;

        allyString = ""
        scaleString = ""
        enemyString = ""

        allyClicked = false;
        scaleClicked = false;
        enemyClicked = false;

        function allyAdd(){
            allyClicked = true;
        }

        function scaleAdd(){
            scaleClicked = true;
        }

        function enemyAdd(){
            enemyClicked = true;
        }

        //Making the long vectors
        function startGame(){
            var startTime = new Date().getTime();
            //var currentTime = new Date().getTime();
            while(true){
                document.getElementById('test').innerHTML = 'test1';
                if(allyClicked){
                    allyTrack += 1;
                    allyString.append(allyTrack.toString())
                    allyClicked = false;
                }
                else if(scaleClicked){
                    scaleTrack += 1;
                    scaleString.append(scaleTrack.toString())
                    scaleClicked = false;
                }
                else if(enemyClicked){
                    enemyTrack += 1;
                    enemyString.append(enemyTrack.toString())
                    enemyClicked = false;
                }
                else{
                    allyString.append(allyTrack.toString())
                    scaleString.append(scaleTrack.toString())
                    enemyString.append(enemyTrack.toString())               
                }
                currentTime = new Date().getTime();

                if(currentTime-startTime > 2000){
                    break;
                }
            }
            document.getElementById('test').innerHTML = 'test2';
            document.getElementById('list').innerHTML = allyString + '\n' + scaleString + '\n' + enemyString;
        }

The JavaScript engine will only evaluate one section of your code at a time (single-threaded). Functions like `allyAdd()` cannot be called until `startGame()` and its `while` loop have finished. Adding a delay between iterations can allow the engine moments to evaluate other code. – [Create a pause inside a while loop in javascript](https://stackoverflow.com/questions/4548034/create-a-pause-inside-a-while-loop-in-javascript) — Jonathan Lonowski, Mar 10 '18 at 18:06
As long as the loop is running, there are no click events. They get delayed until after the loop has finished. You are just freezing your page. — Thomas, Mar 10 '18 at 18:19
@JonathanLonowski So if I create pauses inside will it automatically allow time to respond to button clicks. Or would the button clicks have to line up with the pauses? — Riley Fitzpatrick, Mar 10 '18 at 19:25
@RileyFitzpatrick The click events will be run in between the next two iterations of the timeout, so the user shouldn't have to necessarily click during the pauses. Each click event and timeout will be added to a queue, which the engine just works through one at a time (event loop). — Jonathan Lonowski, Mar 10 '18 at 19:46

score 3 · Answer 1 · answered Mar 10 '18 at 18:05

3

String.append() doesn't belong to JavaScript. I replaced it with concat() and now works.

answered Mar 10 '18 at 18:05

Juan González Salinas

81
7

3

And I also recommend using the @bukharim96 tip, because while the loop is working the interface remains unresponsive. – Juan González Salinas Mar 10 '18 at 18:07
Perfect! The loop now works. The only issue is that the site basically freezes up and I cannot press buttons during the period of time where the loop is running. Any tips so that it can "listen" for button clicks while looping/until time is up? – Riley Fitzpatrick Mar 10 '18 at 18:09
Oops didn't see your comment above^^ – Riley Fitzpatrick Mar 10 '18 at 18:10
1

Note that `.concat()` doesn't change the string it's called on. It returns a modified string, which should be assigned to a variable. – Jonathan Lonowski Mar 10 '18 at 18:10
@JonathanLonowski Would that create an issue? Is there a better way? – Riley Fitzpatrick Mar 10 '18 at 18:42
1

@RileyFitzpatrick It's fine. String values are immutable in JavaScript, so they can't actually be altered in-place. You'll always get a new string value when you try to modify them. – Jonathan Lonowski Mar 10 '18 at 20:05
For comprehension shake, instead of `aString.concat(otherString);`, it's `aString = aString.concat(otherString);` – Juan González Salinas Mar 10 '18 at 22:05

score 2 · Accepted Answer · answered Mar 10 '18 at 18:05

2

You could use the global setTimeout method:

function loop(callback, interval) {
  return setTimeout(function() {
    callback();
  }, +interval);
}

loop(function() {
  console.log("Looping...");
}, 1000);

answered Mar 10 '18 at 18:05

baeyun

228
1
6

Thank you! I'm trying this out along with Juan's tip. – Riley Fitzpatrick Mar 10 '18 at 18:10
My pleasure! `;D` – baeyun Mar 10 '18 at 18:24
I figured I would do my own research before asking you, but I'm still having trouble understanding the "callback" function. I'm a new programmer so I haven't learned functional programming yet. Is there any super quick way to explain `callback();` Thanks – Riley Fitzpatrick Mar 10 '18 at 19:10
In JavaScript you can reference a function: writing its name without parentheses. As you can see, is a way to interact with a function the same way an object would be. – Juan González Salinas Mar 10 '18 at 22:03

Trying to run a while loop for a specified amount of time...Not exiting

2 Answers2