Ytukyg

So right now, I am a beginner in coding and I'm having quite a few issues with the setInterval command. What I am trying to do is have a function that decreases a variable by 1 every time 5 seconds pass. However, although I have looked at many different threads with information about the setInterval command, none of them seem to fit my needs (although I may have missed something) and I have been unable to manipulate anything I have seen elsewhere to perform my function.

while (fullness <= 10) {

    setInterval(hungry{ fullness--; }, 1000);

}

Why your code is wrong:

//There is no need to loop and call setInterval multiple times

//setInterval will fire the callback function every x milliseconds,

//In your example you have it firing every 1 second(1000 milliseconds)

//while (fullness <= 10) {

    //setInterval(hungry{ fullness--; }, 1000);

//}

To fix this:
On page load (document.ready in jquery)
Do just one call to setInterval()

setInterval(function(){

   if(fullness <= 10){

      hungry{ fullness--; };  //Not sure about this line as it comes from your example

   }

}, 5000); //Pass second parameter to setInterval of 5000 milliseconds (5 seconds wait)

You may be trying to use setInterval() in a synchronous way rather than asynchronously.

When you call setInterval(function, period) it only begins a timer that calls the given function every period milliseconds. After calling setInterval javascript will continue to execute the next lines of code right away. If you were to check for your fullness value right after the while loop ends, you might notice it hasn't changed (yet!).

I suggest that you write a new function to handle changing fullness and reacting to the change:

function updateHunger() {

    fullness--;

    if (fullness < 10) {

        //Do something

    }

    else {

        //You have to call clearInterval() to stop the timer

        clearInterval(hungerTimer);

    }

 }

Then use setInterval like this:

//Using a variable to store the timer reference that we create

hungerTimer = setInterval(updateHunger, 5000);

Remember to declare the hungerTimer variable in a scope where it can be accessed from both updateHunger() and the method that calls setInterval().

You have to first set a variable for setInterval and then stop the iteration with clearInterval (important, otherwise the loop will iterate indefinitely). And check for fullness to be greater than 0.

var fullness = 10;

var timer = setInterval(function(){

   if(fullness > 0){

      fullness--;

   }

   else{

      clearInterval(timer);

   }

}, 5000);

Here is the working jsFiddle

The reason you are bumping into this is that JS runs in a single thread. Blocking it by waiting for 1 second would make the entire browser stall, which is why JS does not allow it and we do not have sleep() in JS, we have the Timers API.

But it's nonetheless nice to write straight up for-loops that look synchronous because that's how we "normally" think. That's why you can actually nowadays write something like this if using an engine with async and generator support:

// ES6 features



const sleeper = (x, timeout) =>

  new Promise(resolve => setTimeout(resolve, timeout, x));



function* timer(count, timeout) {

  for (let i = count; i >= 0; i--) {

    yield sleeper(i, timeout);

  }

}



async function main() {

  for (let i of timer(10, 1000)) {

    console.log(await i); // Blocks the main() function but not the JS main thread!

  }

}



main();  

console.log("The call to main() was non-blocking");