Javascript setInterval not working

A lot of other answers are focusing on a pattern that does work, but their explanations aren’t really very thorough as to why your current code doesn’t work.

Your code, for reference:

function funcName() {
    alert("test");
}

var func = funcName();
var run = setInterval("func",10000)

Let’s break this up into chunks. Your function funcName is fine. Note that when you call funcName (in other words, you run it) you will be alerting "test". But notice that funcName() — the parentheses mean to “call” or “run” the function — doesn’t actually return a value. When a function doesn’t have a return value, it defaults to a value known as undefined.

When you call a function, you append its argument list to the end in parentheses. When you don’t have any arguments to pass the function, you just add empty parentheses, like funcName(). But when you want to refer to the function itself, and not call it, you don’t need the parentheses because the parentheses indicate to run it.

So, when you say:

var func = funcName();

You are actually declaring a variable func that has a value of funcName(). But notice the parentheses. funcName() is actually the return value of funcName. As I said above, since funcName doesn’t actually return any value, it defaults to undefined. So, in other words, your variable func actually will have the value undefined.

Then you have this line:

var run = setInterval("func",10000)

The function setInterval takes two arguments. The first is the function to be ran every so often, and the second is the number of milliseconds between each time the function is ran.

However, the first argument really should be a function, not a string. If it is a string, then the JavaScript engine will use eval on that string instead. So, in other words, your setInterval is running the following JavaScript code:

func
// 10 seconds later....
func
// and so on

However, func is just a variable (with the value undefined, but that’s sort of irrelevant). So every ten seconds, the JS engine evaluates the variable func and returns undefined. But this doesn’t really do anything. I mean, it technically is being evaluated every 10 seconds, but you’re not going to see any effects from that.

The solution is to give setInterval a function to run instead of a string. So, in this case:

var run = setInterval(funcName, 10000);

Notice that I didn’t give it func. This is because func is not a function in your code; it’s the value undefined, because you assigned it funcName(). Like I said above, funcName() will call the function funcName and return the return value of the function. Since funcName doesn’t return anything, this defaults to undefined. I know I’ve said that several times now, but it really is a very important concept: when you see funcName(), you should think “the return value of funcName“. When you want to refer to a function itself, like a separate entity, you should leave off the parentheses so you don’t call it: funcName.

So, another solution for your code would be:

var func = funcName;
var run = setInterval(func, 10000);

However, that’s a bit redundant: why use func instead of funcName?

Or you can stay as true as possible to the original code by modifying two bits:

var func = funcName;
var run = setInterval("func()", 10000);

In this case, the JS engine will evaluate func() every ten seconds. In other words, it will alert "test" every ten seconds. However, as the famous phrase goes, eval is evil, so you should try to avoid it whenever possible.

Another twist on this code is to use an anonymous function. In other words, a function that doesn’t have a name — you just drop it in the code because you don’t care what it’s called.

setInterval(function () {
    alert("test");
}, 10000);

In this case, since I don’t care what the function is called, I just leave a generic, unnamed (anonymous) function there.

Leave a Comment