recursive function vs setInterval vs setTimeout javascript

Be carefull.. your first code would block JavaScript event loop.

Basically in JS is something like list of functions which should be processed. When you call setTimeout, setInterval or process.nextTick you will add given function to this list and when the right times comes, it will be processed..

Your code in the first case would never stop so it would never let another functions in the event list to be processed.

Second and third case is good.. with one little difference.

If your function takes to process for example 10ms and interval will be yours 60ms..

function with setInterval will be processed in times: 0-10, 60-70, 120-130, ... (so it has only 50ms delay between calls)
But with setTimeout it will be:
- if you call func first: 0-10, 70-80, 140-150, 210-220, ...
- if you call setTimeout first: 60-70, 130-140, 200-210, ...

So the difference is delay between starts of your function which can be important in some interval based systems, like games, auctions, stock market.. etc..

Good luck with your recursion :-)

As already mentioned, endless recursive functions lead to a stack overflow. Time triggered callbacks will be executed in an own context with a clear stack.

setInterval is useful for more accurate periodic calls over recursive setTimeout, however, there is a drawback: The callback will be triggered even if an uncaught exception was thrown. This usually produces a several bytes long log entry every 60 milliseconds, 1'440'000 entries per day. Furthermore a setInterval callback with heavy load could end up in an unresponsive script or even hole system.

Recursive setTimeout immediate before return from function will not be executed if any exception hasn't been caught. It will guarantee a time frame for other tasks after return from the callback function independent of the function's execution time.

Not sure what you're trying to accomplish, but here's a "safe" way to use recursion... https://stackoverflow.com/questions/24208676/how-to-use-recursion-in-javascript/24208677

/*
this will obviously crash... and all recursion is at risk of running out of call stack and breaking your page...

function recursion(c){
    c = c || 0;
    console.log(c++);
    recursion(c);
}
recursion();

*/

// add a setTimeout to reset the call stack and it will run "forever" without breaking your page!
// use chrome's heap snapshot tool to prove it to yourself.  :)

function recursion(c){
    setTimeout(function(c){
        c = c || 0;
        console.log(c++);
        recursion(c);
    },0,c);
}

recursion();

// another approach is to use event handlers, but that ultimately uses more code and more resources

Recursive setTimeout guarantees a delay between the executions, setInterval – does not.

Let’s compare two code fragments. The first one uses setInterval:

let i = 1;
setInterval(function() {
  func(i);
}, 100);

The second one uses recursive setTimeout:

let i = 1;
setTimeout(function run() {
  func(i);
  setTimeout(run, 100);
}, 100);

For setInterval the internal scheduler will run func(i) every 100ms.

The real delay between func calls for setInterval is less than in the code!

That’s normal, because the time taken by func's execution “consumes” a part of the interval.

It is possible that func's execution turns out to be longer than we expected and takes more than 100ms.

In this case the engine waits for func to complete, then checks the scheduler and if the time is up, runs it again immediately.

In the edge case, if the function always executes longer than delay ms, then the calls will happen without a pause at all.

The recursive setTimeout guarantees the fixed delay (here 100ms).

recursive function vs setInterval vs setTimeout javascript

Related

Recent Posts