Why doesnt JavaScript block?

Question

Consider this JavaScript Code:

<script type="text/javascript">

function loop(Message){
document.getElementById('output').innerHTML = 
document.getElementById('output').innerHTML + Message + '</br>';
}

window.setInterval("loop('Message1')", 1000); //Prints "Message1" every 1 Seconds
window.setInterval("loop('Message2')", 3000); //Prints "Message2" every 3 Seconds

</script>

<body>
<div id="output"></div>
</body>

Output:
Message1
Message1
Message2
Message1
Message1
Message1
Message2
...

And now Consider this PHP-Code:

<?php
while(true){               // Print "Message1" every 1 Second
echo 'Message 1 </br>';
sleep(1);
}



while(true){              //This Code will never be executed, 
echo 'Message 2 </br>';    //because the First Loop Blocks the Process!!!!!
sleep(3);
}

?>

Output:
Message1
Message1
Message1
Message1
Message1
Message1
...

Why doesn't the first JavaScript-Loop stop the whole Process like the first while-Loop in PHP?

I know that Javascript is SingleThreaded, so I suppose, that JavaScript can't just start a new Thread to process the Second Loop. So I am woundering how JavaScript doesn't block here?

Could someone explain it to me?

deceze · Accepted Answer · 2011-08-10 14:24:51Z

6

Because setInterval is specifically not sleep.

setInterval is more like a scheduler. It marks a time at which something should be executed and lets the main thread forget about it completely until that time arrives.

sleep on the other hand is basically a no-op loop, which lets nothing else execute while it's looping.

This is important, since the use cases for PHP and Javascript are entirely different. A PHP script has a start and an end and it executes in a linear fashion. Javascript is used for interactivity, which means it needs to respond to various things (mouse clicks, keyboard input, timers, AJAX callbacks) in a non-linear fashion as they happen. If the main thread was blocked waiting for a timer, nothing would happen and the interface would appear frozen.

Here's a good article by jQuery's John Resig about Javascript timers: http://ejohn.org/blog/how-javascript-timers-work/

edited Aug 10, 2011 at 14:24

answered Aug 10, 2011 at 14:09

deceze♦

525k89 gold badges806 silver badges954 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andreas Köberle · Accepted Answer · 2011-08-10 14:13:20Z

1

As JavaScript is single threaded there is only on stack with commands to execute. Every time setInterval is called the function will be put on the stack and will be execute when all previous ones are execute. This very usefull when you have bunch of data to compue but wants the ui to be not blocked for user input. But when you would use JavaScripts while it would have the same blocking effect like in php

answered Aug 10, 2011 at 14:13

Andreas Köberle

112k58 gold badges281 silver badges308 bronze badges

1 Comment

Andreas Köberle Over a year ago

Not sure what you mean by event loop but if really want to understand whats going on read the this blogpost: dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts

score 1 · Accepted Answer · 2011-08-10 15:14:35Z

1

Previous answers are alright but I have something to add. Perhaps it will be helpful for you.

Your JavaScript code in PHP will look like this:

<?php
function loop($message, $duration, $multiplier){
    while($multiplier--){
        echo $message;
        sleep($duration);
    }
}
while(true){
    loop("Message1", 1, 2);
    loop("Message2", 1, 1);
}
?>

But you have to remember what is in previous posts (in one PHP script one command at one time).

edited Aug 10, 2011 at 15:14

answered Aug 10, 2011 at 14:34

user882255

Comments

Joachim Sauer · Accepted Answer · 2011-08-10 14:07:53Z

0

Because you've not written any loops.

You've just registered some code that should be run at a specified interval.

So once every second loop is executed with the argument 'Message1' and once every 3 seconds it is executed with the argument 'Message3'. But since each invocation returns pretty quickly, there won't be any problem with running the other one just after the first one.

answered Aug 10, 2011 at 14:07

Joachim Sauer

309k59 gold badges568 silver badges624 bronze badges

Comments

Jason Gennaro · Accepted Answer · 2011-08-10 14:07:58Z

0

You are not using a javascript while loop.

You are using a function with a setInterval.

They are different.

Here's more on a js while loop: http://en.wikipedia.org/wiki/JavaScript_syntax#While_loop

answered Aug 10, 2011 at 14:07

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

Pablo Fernandez · Accepted Answer · 2011-08-10 14:14:04Z

0

Javascript, being single threaded, can't block. If it did, the whole browser activity (clicking, rendering, etc.) would stop waiting for something to happen.

That's why expensive operations (like ajax requests) use a callback mechanism to handle responses.

Now, with your particular example setInterval works that way by design (like setTimeout). They handle the sleep use case without blocking the main thread.

answered Aug 10, 2011 at 14:14

Pablo Fernandez

106k59 gold badges196 silver badges234 bronze badges

Collectives™ on Stack Overflow

Why doesnt JavaScript block?

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related