Introduction to asynchronous, single-threaded, and queue instances in JavaScript

This is the first time I understand the concepts of JavaScript asynchronous, single-threaded, queue, thanks to Async JavaScript.
Asynchronous timer function

First, from the asynchronous timing function SetTimeout:

The code is as follows	Copy Code
var begin = New Date ()//code Start settimeout (function () { var end = new Date (); Alert (' Chen San Hello, this program has been running ' + (end-begin) + ' milliseconds '); },1000);//1 seconds after the pop-up dialog box while (new Date ()-Begin) < 2000 {}//Loop code lasts 2 seconds

Under Firefox, press Shift + F4 to pull up the code snippet stenographer, copy the above code into it, and then ctrl-r run it.

One of my values is 2019.

This number surprised me, not good 1 seconds after the play dialog box?

If we are in multithreaded programming language, then our expectations are right. But JavaScript is a single thread, which is different from what we expect.

What does a single thread mean?

JavaScript from var begin = new Date (); Executes and then resolves the settimout function. Settimout a piece of code that says, hey, please put me in the queue and run in 1 seconds. Then the callback function picks up the number and waits in line.

JavaScript continues to run the next sentence – in this case, the while loop. This cycle lasts 2 seconds. During this period, the callback function is quiet, it does not stare at the time, in the past 1 seconds to interrupt, hello, 1 seconds passed, I run.

This is the single threaded design of JavaScript. The callback function in the queue does not take the initiative to ask, it just passively waits. As JavaScript finishes the last code, the JavaScript virtual machine will shout to the queue: next.

At this point, our alert can finally run-but the time has passed 2019 milliseconds.
asynchronous I/O functions

Modern, commonly used Ajax operations are asynchronous I/O types, such as GET, POST.

The code is as follows	Copy Code
$.get (' http://www.111cn.net/', function (data) {//Because of JavaScript's homology policy, local execution of this statement actually fails, just an example alert (data); }); while (true) {}

When JavaScript executes to a GET statement, it initiates an HTTP request, asks for a return http://www.111cn.net/page, and defines a callback function that joins the callback to the event queue so that the HTTP response succeeds with the data, and JavaScript continues The next line, while, because the while condition is always true, the program runs Forever, and the previously defined callback function is queued and the page is suspended in animation.

Of course, this example is a bit extreme, give an example of a relaxed, local server erection:

The code is as follows	Copy Code
$.get (' index.html ', function (data) { alert (data); }); Alert (' Hey Chen ');

Code execution to ' Hey Chen ', Browser Popup dialog box window.

Shut down the dialog window, open the Google Chrome Developer tool to view the Network tab, and the Status Text field of the Get statement is in the Pending state. The meaning of the word is not stated in the help of the chrome developer tool, but we can check the status of the HTTP request using WireShark or Fiddler2:

As you can see in the illustration above, the request-response process is successful, except that the callback for the get definition failed to execute, so Chrome is displayed as a Pending state. Now we press the OK button on the dialog window, or we turn off the dialog box, and the callback function executes.

The above is the case under Google Chrome version 30.0.1599.114, where the alert method blocks the event loop, causing the callback to not receive data.

The situation under Firefox 24 is slightly different, and alert in example 3 does not prevent an event loop, two AJAX requests are all executed, and the callback executes, so there will be three pop-up dialogs on the page.

WireShark Crawl Firefox under the HTTP data as shown:

Wireshark Log Firefox http

Of course, the browser's approach is different this kind of thing is really not worth my fuss, after all, I came from the IE6 melee.