CODEWITHSUNDEEP
javascriptfunctionwhile-loopstack-overflowsettimeout
codersun3
codersun3

Reputation: 175

While vs setTimeout in Javascript

I'm trying to figure out whether it is better to write a while loop (which will run for a long period of time) or a setTimeout function in Javascript. From what I understand, since JavaScript is single threaded, it's bad for any one function to run for a long period of time, since that means that no other function will be able to run at the same time. Therefore, it seems to me that setTimeout would be better.

(1) Can someone please confirm that the above is true?

(2) Will there be a stack overflow problem if I use setTimeout repeatedly, as in the example below?

function enqueueSomething() {
    doSomething();
    setTimeout(enqueueSomething);

vs.

while (true) { doSomething(); }

Citation: code adapted from here: Check if function can be called: Javascript (meagar's comment)

Upvotes: 0

Views: 1195

Answers (5)

Gil Dawson
Gil Dawson

Reputation: 11

The question might be posed as, would you prefer recursion or repitition? Using setTimeout tells the interpreter to finish your code, and then re-call your function. The default delay value of zero will actually turn out to be several hundred milliseconds, in addition to whatever time it takes (probably not much) to finish your code.

The while loop, however, calls your function recursively, adding each call to the stack until the last one returns. While it does gobble a bit of memory, it's much faster.

Another big difference is that repeated calls operate on globals in the called order, while recursed calls..., it's something you have to think about.

Upvotes: 0

Downgoat
Downgoat

Reputation: 14371

While loops

while loops would fit your code better but as many people have said, they can have problems and go on forever. Your best bet is to have a limit to how many times the loop can repeat:

var i = 0;
while (my_condition && i < 10000000) {
    i++;
}

This way, the while loop won't go on forever.

The other problem is while loops are synchronous meaning they will block the code flow until they are finished. Sometimes this can be desired behavior other times it isn't.

Recursive functions

I tend to use recursive functions that will repeat when a specific condition is met

function recurse() {
    super_specific_condition && recurse();
}

Animation / Rendering

If you are dong rendering / animation, you want to use requestAnimationFrame which uses "recursive" functions.

Multi-threaded tasks

Web workers are also an option as they can run on a separate thread. You can learn about them here

Timing

Using setTimeout uses asynchronous methods. setInterval is probably more appropriate and it's designed to recurse.

If you're going to use setTimeout/Interval methods without a delay you probably should just stay away.

Speed / Conclusion

Just note that computers are very fast these days and you can recurse about 100,000 times almost instantly. On all question regarding recursing / speed. I always say, that recursing with while and recursive functions is best and if you have > 100,000 you have larger problems such as memory, and if you get it from a server, server load.

I'd stick with recursive functions, web workers, or requestAnimatonFrame depending on what you're doing. Only if you're gonna be using setTimeout/Interval with a delay is when you should use it (in my opinion)

Upvotes: 0

mariodiniz
mariodiniz

Reputation: 102

While block the code execution, your code will be trapped there until the loop finishes. Probably will overload the browser leading to crash your application`s tab.

setTimeout will create the task to execute your code, and continue to execute the rest of the code. When its time to execute your function at setTimeout it will stop whats is doing to execute your setTimeout function.

While loop blocks the rest of your code until finishes, setTimeout and setInterval dont.

Upvotes: 1

Nathanael Smith
Nathanael Smith

Reputation: 3311

You are correct that javascript is single threaded and while one function is running no other functions can run. In the browser this also means that the entire page will freeze (use can't type, move mouse, etc.).

setTimeout is a much better choice.

Upvotes: 1

Sinistralis
Sinistralis

Reputation: 432

while (true) would create an infinite loop if you did not exit it somehow in Javascript. This is why asynchronous programming is very prevelant in javascript.

Anyway, you are correct in that either setTimeout or setInterval would be ideal. If you are planning to render something, your rendering loop should be using requestAnimationFrame.

Alternatively there are webworkers that are similar to threads, however you lose a LOT of scope when you use them (for example, window becomes undefined in the scope of a webworker). Webworkers are great if you need to offload processing and can enclose the entire process into a simple scope (Such as performing heavy calculations).

Upvotes: 2

Related Questions