setTimeout appears to execute too fast

Question

I've been fiddling around with setTimeout and setInterval, and I cannot get the code to execute the way I would like it to. My goal is to create a setInterval, which calls once every three seconds, and have it clear after ten seconds. However, when I run the code in firebug, the only thing I get is a number, which I assume is the id of setInterval because every time I execute the code, the number increases.

var intID = setInterval(function() {
    console.log("I've been called");},3000);


setTimeout(clearInterval(intID), 10000);

Answer 1

This statement:

setTimeout(clearInterval(intID), 10000);

means, "call the function 'clearInterval' passing the value of variable 'intID', and then pass the return value of that and the number 10000 to the function 'setTimeout'."

In other words, you're calling the function "clearInterval" and then passing the returned value to setTimeout().

Instead, pass setTimeout() a function:

setTimeout(function() { clearInterval(intID); }, 10000);

Answer 2

You are not setting up the interval like this:

setInterval(console.log("I've been called"), 3000);

If you did, console.log would be called immediately -- even before setInterval, since it's an argument to setInterval and arguments have to be evaluated before calling the function that uses them.

So why are you setting up the timeout like this?

setTimeout(clearInterval(intID), 10000);

This causes the exact same kind of problem as above.

Just do the same thing you did when setting up the interval instead:

setTimeout(function() { clearInterval(intID); }, 10000);