If JavaScript is single-threaded, what is it?

Question

This is the code :

// link 1 handler. This must finish in any case before link2 starts $('#link1').click(function () { console.log("First Handler"); setTimeout(function() { console.log("Thread???"); }, 2000); }); // link 2 handler. It starts only when block code of link1 handler finish $('#link2').click(function () { console.log("Second Handler"); }); $('#link1').click(); $('#link2').click(); 

clicking, sequentially, on link1 and link2 means (for what I understand ) that the block code of the link2 handler cannot be started until the link1 handler is completed (because JS is the only thread and the system events are synchronous).

So why about console.log("Thread???"); to be printed after 2 seconds? I see it as a thread. In addition, behavior is one and the same ...

Answer 1

When the handler runs for link1, it runs the entire function, including the setTimeout function, which simply registers the function that runs your console.log("Thread???") statement console.log("Thread???") . It happens very fast. Think of it as if you were raising a firearm. You didn’t shoot, you just shot and ran a countdown of 2 seconds.

In other words, the setTimeout function does not block the execution of any other functions and (selection added) does not make link2 wait. As for the link1 handler, he did this job, and the JavaScript engine continues to execute the link2 handler, which also ends long before you click on the 2000ms event.

Answer 2

single threaded? Yes!! The explanation is too complete for a brief answer here and has been considered previously. Check out this fantastic article: John Resig - How JavaScript Timers Work

Edited: Because there is no exception for "Yes !!" :-)

Answer 3

Javascript is single-threaded, but code execution can be asynchronous.

here is the execution order:

 link1 clicked -> link2 clicked -> link1 handler executed -> link2 handler executed -> waiting for less than 2 seconds -> link1 setTimeout event handler logic executed 

Answer 4

I think I can try to summarize.

There is a cyclical queue, and timers are given a moment that needs to be assessed at the beginning / end (the view of the same), which needs to be checked and triggered by its events.

This may seem like a stupid answer, but it is conceptually correct.

I guarantee arming with this concept, you can implement your own version inside a carefully thought-out cycle. Just don’t think it =)

Answer 5

If you want to work with streams in a java script, you can use the WebWorker object for HTML5. See John Resig's article on WebWorkers http://ejohn.org/blog/web-workers/

Answer 6

JavaScript [as a script] is single-threaded, but the browser it works with can use the OS’s multithreading capabilities.

If a programmer is required, there are several ways to make pieces of Javascript code in a multi-threaded environment:

• Using the setTimeout() method, which queues the piece of the piece passed to it as a parameter.
• Using ActiveX / Applet / Flash components: which are internal code running inside a browser or a separate process. Javascript can take control of these components and can call methods on them.

In addition, all AJAX calls are multi-threaded, as they occur through ActiveX and support callbacks.

Therefore, the JavaScript concept, which is single-threaded, is wrong ... It restricts the user from creating and processing threads.

Answer 7

I use this help u !!!

HTML

 <input type="button" value="click me"> <input type="text"> 

first coding;

 <script> var button = document.body.children[0] var text = document.body.children[1] button.onclick = function() { alert('in onclick') text.focus() alert('out onclick') } text.onfocus = function() { alert('onfocus') text.onfocus = null //(*) } </script> 

Second coding;

 <script> var button = document.body.children[0] var text = document.body.children[1] /* button.onclick = function() { alert('in onclick') text.focus() alert('out onclick') }*/ text.onfocus = function() { alert('onfocus') text.onfocus = null //(*) } button.onclick = function() { alert(1) setTimeout(function() { text.focus() }, 0) alert(2) } </script>