setInterval()
Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function.
while()
Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.
If I use while(true)
to execute a specific statement, my browser either crashes(Firefox), lags(Opera), or the statement won't be executed(Chrome), but if I used setInterval()
with a fixed time of 0 seconds, everything works perfectly, even though its only 0 seconds, and while(true)
can't logically be faster than 0 seconds, but why does this happen?
while() example:
<!DOCTYPE html> <html> <body> <div id="counter"></div> <script> var i = 0; while (true) { document.getElementById("counter").innerHTML += i++; } </script> </body> </html>
setInterval() example:
<!DOCTYPE html> <html> <body> <div id="counter"></div> <script> var i = 0; setInterval(function() { counter() }, 0); function counter() { document.getElementById("counter").innerHTML += i++; } </script> </body> </html>
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.
The only difference is that setInterval has a delay of 1000 milliseconds before returning to the top of the loop to fire again.
In case of time intensive synchronous operations, setTimeInterval may break the rhythm. Also, if any error occurs in setInterval code block, it will not stop execution but keeps on running faulty code. Not to mention they need a clearInterval function to stop it.
setTimeout allows us to run a function once after the interval of time. setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.
There is a large difference which involves locking. The first approach, the while
loop is going to lock up the user's cpu because it runs forever without stopping and will take up 100% of the processor. setInterval
actually has a minimum amount which is implicit, and depends on the browser. I believe it is around 10ms. So, your setInterval
is actually only running for a millisecond or so doing that simple update, once every 10ms. This is harsh on the processor, but will not require 100% of the processor and can be mitigated with task management by the operating system.
while(1)
generates an infinite loop, that is, JavaScript will simply run forever and never give control back to the browser, which therefor freezes, because it is unable to to anything else ever again (until the script is killed).
setTimeout(func, 0)
behaves differently in the sense that after it executes, control is given back to the browser, which may then decide what to do after. Setting 0ms in setTimeout
does not guarantee that the JavaScript code is run directly after it stops. With the 0ms parameter you merely tell the browser that you'd like the code to run directly after it stops, but the browser is free to do something else entirely before actually doing so.
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