Both examples below will achieve the same result, but is one better (safer) to use than the other?
In Example A, a call to the function foo is made every second. What happens if the server takes longer than a second to respond, or if there is a delay somewhere else? Does the interval wait until all of the code in foo has been executed, or does the interval continue to call foo every second no matter what? Do the calls overlap?
Example B is identical to Example A, except that in Example B there is check in place (waiting for the server response) before another request to the server is made.
-::EXAMPLE A::-
window.onload = setInterval( foo, 1000 )
function foo() {
ajax call to server()
// do something
}
vs.
-::EXAMPLE B::-
window.onload = foo()
function foo() {
ajax call to server()
wait for server response, then foo()
}
Technically, A is more correct. Recursive functions should generally always be used with a base case. Otherwise, the program will eventually run out of memory since it has to create a new context environment for each function call or object it creates. That's in theory, anyways.
I think the official way to do a loop like this is to use SetTimeout at the beginning of your function. Since JS is single threaded, it will only call it once the function itself is finished. That's the way I've done it in the past, and seems to be the common answer with a Google search.
From what I'm reading online, and what you appear to be alluding too as well, setTimeout appears to be the better option to implement when you're dealing with variables that are out of your control, such as repeated calls to a server for things like an instant messaging program because no matter how long it takes to query the database and send that information back, setInterval doesn't care and it's going to continue whether you like it or not.