I need to run a javascript function each 10 seconds.
I understand the syntax must work like follow but I am not getting any success:
function funcName() { alert("test"); } var func = funcName(); var run = setInterval("func",10000)
But this isn't working. Any help?
setInterval() The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval() .
Nested setTimeout calls are a more flexible alternative to setInterval , allowing us to set the time between executions more precisely. Zero delay scheduling with setTimeout(func, 0) (the same as setTimeout(func) ) is used to schedule the call “as soon as possible, but after the current script is complete”.
To reset the setInterval timer with JavaScript, we can use the clearInterval function. const myFn = () => { console. log("idle"); }; let myTimer = setInterval(myFn, 4000); //... clearInterval(myTimer); myTimer = setInterval(myFn, 4000);
Method 1: Calling the function once before executing setInterval: The function can simply be invoked once before using the setInterval function. This will execute the function once immediately and then the setInterval() function can be set with the required callback.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With