Talking about asynchronous and asynchronous _javascript techniques in JavaScript

Why do I need to be asynchronous? Why Look at a piece of code.

Question 1:

for (Var i=0;i<100000;i++) {

}

alert (' Hello world!!! ');

This code means the execution of 100 ... Again after the implementation of alert, this brings the problem is, seriously blocking the execution of the following code, as for why, mainly because JS is single-threaded.

Question 2:

We usually have to solve the problem, if we need to add the script code in the head, usually write the code in the window.onload inside (if the DOM is manipulated), have you ever thought of why add window.onload ? The reason is that when you manipulate the DOM, the HTML code behind the script doesn't start loading, so it's possible that you want to marry her before anyone else is born? Of course not, plus window. This onload can be because the window.onload code inside is executed after all the documents have been loaded, which is equivalent to Asynchrony.

Question 3:

Sometimes the page does not need to load all the code at once, and more often than not, we are loading a piece of code according to a requirement.

What is a single thread?

You can understand that a single thread is the execution of a piece of code, preceded by execution, and followed by execution.

Which of the JS is asynchronous?

I believe this thing, almost all with rotten, it is settimeout/setinterval of course there are ajax,ajax asynchronous I believe we all know, of course, can also sync but no one to do it, But for settimeout and setinterval to be asynchronous there may be some small partners different understanding, the following is why say that settimeout is asynchronous.

settimeout (function () {
console.log (0);
},0)

console.log (1);

1

//0

Run this code after the first print is 1, instead of 0, some small partners are not beginning to confuse, although we give settimeout set is 0 seconds after the execution console.log(0)  , but this settimeout is very special, because it is asynchronous, Let's just leave the reason why the print is 1 and then 0, let's talk about what is asynchronous.

What is asynchronous?

For example, some restaurants you need to book in advance to eat, wait until the other person finishes eating so you can go, so when other people eat, you'll be able to do other things, and when someone else is finished, you'll be notified, so you can go, so for code like AJAX, you define a callback method, This callback method is not executed at that time, but waits until the server response is complete before executing the code.

Let's go back to the settimeout. It works like this, when you define settimeout that moment (regardless of time is not 0), JS does not go directly to execute this code, but to throw it into an event queue, when all the synchronization tasks in the page are finished, To execute the code in the event queue. What is synchronization, except that asynchronous code is synchronous-_-.

How does JS implement asynchronous?

　　1. Using Settimout to implement asynchronous　　　　

settimeout (function () {
console.log (document.getelementbytagname (' body ') [0]);
},0)

But SetTimeout has a little problem, that is, time is not accurate, if you want to execute this code faster, we can use a function provided by HTML5.

Requestanimationframe (function () {
console.log (document.getelementbytagname (' body ') [0]);
}

The difference between Requestanimationframe and settimeout is that Requestanimationframe executes faster than settimeout , So many people use requestanimationframe to make animations.

　　

　　2. Create a script label dynamically　　

var head = document.getelementbytagname (' head ') [0];
var script = document.createelement (' script ');
SCRIPT.SRC = ' chasing dream son. js ';
Head.appendchild (' script ');

3. Use script to provide Defer/async

  <script src= "Xx.js" defer></script>

　　Defer: When the page is loaded, the code is executed.

<script src= "Xx.js" async></script>

Async: Execute script code asynchronously

　　

However, asynchronous is also a disadvantage, such as the following code:

　Normal code:　　　

try{
throw new Error (' Hello World ');
} catch (Err) {
console.log (err);
}

Error:hello World (...)

　Asynchronous code:　

try{
settimout (function () {
throw new Error (' Hello World ');
},0)
}catch (err) {
console.log (err);
}

Referenceerror:settimout is not defined (...)

You can see that the code in the catch is not executing, meaning that the try cannot capture the code inside the asynchronous.

Summarize

About the asynchronous in JS and how to asynchronous to this basically end, about JS asynchronous is commonplace, but still hope this article content for everyone can have some help.