Starting setInterval after clearing it (infinite loop)

Question

I'm trying to create an infinite loop that makes a variable increment from 0 to max 30 and min 3 taking one second between each increment. But instead of this it doesn't increment at all, instead it starts logging check over and over again and the variables x and random never get redefined.

var random = Math.floor(Math.random() * 27) + 3;
var x = 0;

setInterval(count, 1000)

function count() {
    if (x < random) {
        x++document.getElementById("secs").innerHTML = x + "s ago";

        console.log(x);
        console.log(random);

    } else {
        var random = Math.floor(Math.random() * 27) + 3;
        var x = 0;
        console.log("check")

    }
};

score 0 · Answer 1 · answered Sep 03 '16 at 20:59

Add the log statement console.log(x); BEFORE the if-statement just to see what the value of x is...does the value change? You need to have a place here you change the value of x - something like x +=1; You need to change your count method to somehow increment the value of X - see my example below:

function count() {
if (x < random) {
    document.getElementById("secs").innerHTML = x + "s ago";
    //here you increment X
    x += 1;   
    console.log(x);
    console.log(random);
} else {
    //here you are setting new values (no need for var - otherwise you create new, local variables
    random = Math.floor(Math.random() * 27) + 3;
    x = 0;
    console.log("check");
}
};

I hope this helps.

cube · Answer 2 · 2016-09-03T21:10:26.290

Your code should be...

var random = Math.floor(Math.random() * 27) + 3;
var x = 0;

setInterval(function() { x++; count(x,random) }, 1000)

function count(x ,random) {
if (x < random) {

    document.getElementById("secs").innerHTML = x + "s ago";

    console.log(x);
    console.log(random);

} else {
    var random = Math.floor(Math.random() * 27) + 3;
    var x = 0;
    console.log("check")

}
};

Remember it's best to assign your setInterval to a variable so it can be cleared...

thisInterval = setInterval(function() { x++; count(x,random) }, 1000)
clearInterval(thisInterval)//<--use this when you want to stop the timer

score 0 · Accepted Answer · answered Sep 03 '16 at 21:08

You created two global variables to hold values for x and random, but then you also created two local variables inside your count function. In javascript there something called variable hoisting which means that all variable declarations are moved to the top of scope function. In your case this is how your count function looks like to javascript runtime:

function count() {
  var random, x;
  // At this point random and x are both undefined, so x < random will always be false

  if (x < random) {
    x++document.getElementById("secs").innerHTML = x + "s ago";

    console.log(x);
    console.log(random);

  } else {
    random = Math.floor(Math.random() * 27) + 3;
    x = 0;
    console.log("check")
  }
};

To fix your problem you need to get rid of var keyword inside count function

var random = Math.floor(Math.random() * 27) + 3;
var x = 0;

setInterval(count, 1000)

function count() {
  if (x < random) {
    x++;
    document.getElementById("secs").innerHTML = x + "s ago";

    console.log(x);
    console.log(random);
  } else {
    random = Math.floor(Math.random() * 27) + 3;
    x = 0;
    console.log("check")
  }
};

score 0 · Answer 4 · edited May 23 '17 at 12:01

Your code has a couple of problems. One being that you are declaring variables inside a function which you have already declared outside of the function (inside the else portion of your if-else), and another being that once you invoke the window.setInterval() method you have no way of stopping it being called every second unto eternity.

What you are aiming for is to increment the value of x until it reaches the value of random, and then start all over again. The window.setTimeout() method is more suited to your purposes here. Consider the following...

/* generate variable values */
var random = Math.floor(Math.random() * 27) + 3;
var x = 0;
var timer;

/* report the 'random' value */
console.log('random:',random);

function count() {
    if (x < random) {    
        /* report the 'seconds since' value */
        console.log(x+1);

        /* increment the value */
        ++x;

        /* call this function in 1000ms */
        timer = setTimeout(count, 1000);

    } else {
        /* re-generate variable values */
        random = Math.floor(Math.random() * 27) + 3;
        x = 0;

        /* report the new 'random' value */
        console.log(" check");
        console.log('random:',random);

        /* call this function in 1000ms */
        timer = setTimeout(count, 1000);
    }
}

/* begin 1s from now */
timer = setTimeout(count, 1000);

If, for whatever reason, you wished to halt the next call to count() you can pass the timer variable to the window.clearTimeout() method, like so.

/* clear Timeout */
clearTimeout(timer);

See also: WindowTimers @ MDN and this classic StackOverflow answer concerning JavaScript variable scope.

Thank you for your contribution, my issue has been solved. – D. W Sep 04 '16 at 09:18 — D. W, Sep 04 '16 at 09:18

Starting setInterval after clearing it (infinite loop)

4 Answers4