On JavaScript thread and timing mechanism

This article mainly introduces the JavaScript thread and timing mechanism of the relevant data, the need for friends can refer to the

The use of settimeout and setinterval

Javascript API documents define settimeout and setinterval the second parameter meaning is the interval of milliseconds after which the callback function is executed and every number of milliseconds callback functions are executed. But as work experience accumulates, we find that this is not the case.

Like what

?

1 2 3 4 5

Div.onclick=function () {settimeout (function () {document.getElementById (' input '). focus ();},0);

The explanation is not clear, immediately execute Bai, why also set a time to make a circle.

And one day you wrote the following code

?

1 2	settimeout (function () {while (true) {}},100); settimeout (function () {alert (' hello ');},200);

The first line of code dies, and the result is that the second line of alert never appears.

Single threaded or multi-threaded?

Originally, the JavaScript engine was single-threaded, with only one thread running the JavaScript program in the browser. Because of the single-threaded design, it eliminates the complex multithreaded synchronization problem.

When a timer is set, the browser inserts the callback function you specified into the task sequence after the set time, rather than executing it immediately. If the set timer time is 0, which means inserting the task sequence immediately, rather than executing it immediately, you still have to wait for the task in the queue to finish, and you will be executed.

So the following code pops up 2, then pops up 1.

?

1 2 3 4

settimeout (function () {alert (1);},0); Alert (2);

So what is the practical use of this? And look at the following example

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17-18

<! DOCTYPE html>

In this example, the JS engine needs to execute the KeyDown event handler, and then update the value of the input box. When an event handler executes, the task that updates value can only go into the queue, so the KeyDown event cannot get an updated value value when it is executed, but by settimeout we put the value into the queue and execute after the value is updated, So the content can be displayed in real time.

Come back and look at the following code:

?

1 2 3 4 5 6 7 8

settimeout (function () {//do something ... settimeout (arguments.callee,10);},10); SetInterval (function () {//do something ...},10);

These two pieces of code look the same, don't they? In fact, there is a difference, the first paragraph of the callback function of the settimeout is the JS engine after the implementation of a new timer, the assumption from the previous callback to the next callback to start as a time interval, theoretical time interval >=10ms, after a piece of code <=10ms.

Speaking of which, is the XMLHttpRequest really asynchronous? Yes, the request is asynchronous, but the request is a new thread in the browser. When the requested state changes, if the callback has been previously set, the asynchronous thread waits for processing in the JS engine processing queue, when the task is processed, and the JS engine is still single-threaded to perform the function set by onreadystatechange.

The above mentioned is the entire content of this article, I hope you can enjoy.