CODEWITHSUNDEEP
javascripthtmlsetinterval
Samuel stankiewicz
Samuel stankiewicz

Reputation: 192

SetInterval messages not changing

I'm making a loading screen for a game I'm creating with html and JS. I want various messages to display, about every three seconds. The SetInterval function doesn't seem to be rotating the messages, even though it works with something else (like an alert every three seconds). here's the code I've written for the changing messages.

<!doctype html>
<html>
<head><title>Loading screen</title></head>
<script>
let messageNum = 1;

setInterval(function(){ 
  messageNum++
 }, 1000);

if (messageNum >3) {
  messageNum = 1;
}

if (messageNum === 1) {
  document.write('Message number ONE');
}

if (messageNum === 2) {
  document.write('Message number TWO');
}

if (messageNum === 3) {
  document.write('Message number THREE');
}
</script>
</html>

Upvotes: 1

Views: 431

Answers (6)

ViNo
ViNo

Reputation: 11

With the current code, setInterval would still be working. i.e., messageNum++ will keep on incrementing, however, you're not capturing any feedback or output from there, . That's why when you add an alert you'll see that the messageNum would have increased with each alert. (try console.log(messageNum), it would work too.)

If your aim is to keep incrementing the messageNum with setInterval, and show different message based on the current value of the messageNum, you will have to check the conditions inside the setInterval.

setInterval will have to do the following things together. 1. increment the variable 2. check the variable's current value and show a message.

let messageNum = 1;

setInterval(() => {
 if (messageNum > 3) {
  messageNum = 1;
 }

 if (messageNum === 1) {
  document.write('Message number ONE');
 } else if (messageNum === 2) {
  document.write('Message number TWO');
 } else {
  document.write('Message number THREE');
 }
}, 1000)

NOTE:

Use if-else condition effectively so that, once one condition is satisfied, the other conditions will not be needlessly checked.

In its current form, even if the messageNum === 1 is satisfied, the program will check the remaining 2 if conditions (messageNum === 2, messageNum === 3) unnecessarily.

Upvotes: 0

EugenSunic
EugenSunic

Reputation: 13703

You want to stop your timer at 3 hence the following.

You can make it better by introducing a function which returns the wanted message and then concatenate it to the default message

let messageNum = 0;
const id = setInterval(function() {
  messageNum++;
  document.write("Message " + writeMessage(messageNum));
  // stop the timer
  if (messageNum === 3) clearInterval(id);
}, 1000);

function writeMessage(num) {
  switch (num) {
    case 1:
      return "ONE";

    case 2:
      return "TWO";

    case 3:
      return "THREE";

    default:
      return null;
  }
}

Upvotes: 0

SomoKRoceS
SomoKRoceS

Reputation: 3043

setInterval will run the function I'm your first argument every x ms (second argument).

Since your function only increment the variable, you won't see the message.

The message printing and if statements are not part of that function that run inside the setInterval which make those lines to run only once.

You need to put the 'if' statements and message printing inside the function triggered in setInterval.

P.S.

Please make sure you are using document.write only for testing or streaming. It is not a good practice to use it inside a function, since it will overwrite the existing HTML each time write is called.

Upvotes: 0

Chase
Chase

Reputation: 3126

setInterval is an asynchronous operation, so your events happen in the wrong order.

You need to run your output logic WHEN the number changes. Right now, you are running all your output logic before the first time the setInterval runs even the first time.

let messageNum = 1;

setInterval(function(){ 
  outputNum();
  messageNum++;
}, 1000);

function outputNum() {
  if (messageNum > 3) {
    messageNum = 1;
  }

  if (messageNum === 1) {
    document.write('Message number ONE<br />');
  }

  if (messageNum === 2) {
    document.write('Message number TWO<br />');
  }

  if (messageNum === 3) {
    document.write('Message number THREE<br />');
  }
}

Upvotes: 1

thealpha93
thealpha93

Reputation: 778

Hope this will help:

<!doctype html>
<html>
<head><title>Loading screen</title></head>
<script>
let messageNum = 1;

const interval = setInterval(function(){ 
  messageNum++;
  if (messageNum >3) {
  messageNum = 1;
}

if (messageNum === 1) {
  document.write('Message number ONE');
}

if (messageNum === 2) {
  document.write('Message number TWO');
}

if (messageNum === 3) {
  document.write('Message number THREE');
}
 }, 1000);


</script>
</html>

Also make sure to clear the interval when needed. It might cause memory leaks. you can clear interval using this code:

clearInterval(interval)

Upvotes: 0

H-net
H-net

Reputation: 31

try to execute your code inside the setInterval-function:

<!doctype html>
<html>
<head><title>Loading screen</title></head>
<script>
let messageNum = 1;

setInterval(function(){ 
  messageNum++
  if (messageNum >3) {
    messageNum = 1;
  }

  if (messageNum === 1) {
    document.write('Message number ONE');
  }

  if (messageNum === 2) {
    document.write('Message number TWO');
  }

  if (messageNum === 3) {
    document.write('Message number THREE');
  }
 }, 1000);


</script>
</html>

Regards

Upvotes: 3

Related Questions