在JavaScript中使用setTimeout（）和setInterval（）时调用函数

Question

If I call a named function using setTimeout() and setInterval() without the parentheses it works as expected. When I call the same function with the parentheses it either executes it immediately or gives an error.

I am looking for a deeper understanding in this matter then what I have found on the web. Would you guys please explain to me why this is true?

var func = function(){
    console.log("Bowties are cool.");
}

setTimeout(func(), 1500);
// Prints "Bowties are cool." immediately

setInterval(func(), 1500);
// Throws an error

setInterval(func, 1500);
// Works as expected

setTimeout(console.log("Bowties are cool."),1500);
// This method has the same result as "setTimeout(func(), 1500)".

Answer 1

You must pass a function reference to both setTimeout() and setInterval() . That means you pass a function name without the () after it or you pass an anonymous function.

When you include the () after the function name as in func() , you are executing the function immediately and then passing the return result to setInterval() or to setTimeout() . Unless the function itself returns another function reference, this will never do what you want. This is a very common mistake for Javascript programmers (I made the same mistake myself when learning the language).

So, the correct code is:

setTimeout(func, 1500);
setInterval(func, 1500);

If you know other languages that use pointers, you can think of the name of a function with the () after it as like a pointer to the function and that's what a function reference is in Javascript and that's what you pass to a function when you want it to be able to execute some function later, not immediately.

---

When you mistakenly do this:

setTimeout(func(), 1500);
setInterval(func(), 1500);

It is executing your func() immediately and then passing the return result to setTimeout() and setInterval() . Since your func() doesn't return anything, you are essentially doing this:

func();
setTimeout(undefined, 1500);

Which is what you observe happening, but not what you want.

---

Further, if you want to execute a specific function call such as console.log("Bowties are cool.") , then you can wrap it in another function like this:

setTimeout(function() {
    console.log("Bowties are cool.")
}, 1500);

So, again you are passing a function reference to setTimeout() that can be executed LATER rather than executing it immediately which is what you were doing.

Answer 2

setTimeout and setInterval expect a function reference to be passed to them. You should not be calling the function within the setTimeout and setInterval calls.

Incorrect ( DON'T DO THIS ):

setTimeout(func(), 1500);
setInterval(func(), 1500);
setTimeout(console.log("Bowties are cool."), 1500);
setInterval(console.log("Bowties are cool."), 1500);

Correct:

setTimeout(func, 1500);
setInterval(func, 1500);
setTimeout(function() {
    console.log("Bowties are cool.");
}, 1500);
setInterval(function() {
    console.log("Bowties are cool.");
}, 1500);

Note how I wrapped the console.log in an anonymous function in order to use it with setInterval and setTimeout. I could not pass console.log to the setInterval and setTimeout functions, because it needs the parameter "Bowties are cool." . Wrapping it in the anonymous function solves this.

Answer 3

When you add parentheses after a defined function, you actually call or invoke the function.

But when you pass a function as a parameter inside another function, you don't want to call the function, you just want to pass a reference to this function as a parameter, (and the function you passed in, will be available to be called when needed).

for more about callback functions in general, here .