Recently collated code, some asynchronous JS method is not familiar with, Baidu did a collation to facilitate access.

1.setTimeout

A method of delay execution, often used, but often in practice is not strict, just a long wait to make a 500 millisecond delay so that the function can run, but there is no treatment for how long the code needs to execute and different computer execution rate.

2. The script properties

Also async: execute script code asynchronously

3. Dynamically create script labels

It didn’t feel very practical. No notes.

4. Callback

It is good for understanding deployment but bad for reading maintenance. Be careful to distinguish synchronous callback from asynchronous callback

Example: F2 () waits for the result of f1(). F1 () is a time-consuming function, and f2 is the callback of F1

Function f1(callback){setTimeout(function(){callback()},1000)}

5. Event monitoring

Monitoring functions are: on, bind, listen, addEventListener, observe

Example (using jquery)

F1. on('done',f2) F2 is executed when the done event occurs in f1

function f1(){setTimeout(function(){..... f1.trigger('done'); 100}},

F1.trigger ('done') Indicates that the done event is triggered immediately after the execution is complete to start the f2 execution

Example: the onclick method

Element.onclick =function(){} The disadvantage is that when an element is bound to multiple events, only the last event will be added, so add events using the following method:

Element. AttachEvent (” onclick “, f1) Ie writing

Element. addEvenListener(“click”,f1,false

6. Publish and subscribe mode, also known as observer mode

An example of a jquery plugin:

Subscribe ("done",f2) : F2 subscribes the done signal to the signal center

function f1(){setTimeout()=>{........... jquery.publish("done")},1000}

Jquery.publish ("done") is a done signal issued to the signal center after f1 execution to cause F2 execution

Unsubscribe: jquery. unsubscribe("done",f2)

Similar to event listening, but you can see how many signals there are, how many subscribers there are for each signal, and so on by looking at the message center.

7. Promise object (Promise model)

Promise is a pattern that helps manage code returned asynchronously

A promise can be settled in two states: Pending. A promise will stay in a waiting state until the asynchronous call it wraps returns, times out, or ends. Then the promise state changes to completed. It was resolved and rejected.

Var p =new Promise(function(resolved))

settimeout(function(){var result=10*5;

if(result===50){resolve(50)

}else{

reject(new Error('Bad Math'))},1000)

})

p.then(function(result){console.log(resulr)})

p.catch(function(){console.error('wrong')})

Resolve tells the user that the promise was resolved, while the Reject function failed to complete successfully

The example on the upper web did not run successfully, and the parent below tested well

var mm=new Promise((resolve,reject)=>{setTimeout(()=>{let a=5*10if(a==50){resolve(a)}else{reject("errow")},2000}

mm.then((e)=>{console.log(e)})

mm.catch((e)=>{console.log(e)})

8.async/await

Async is used to declare asynchronous functions that return a promise object. If the function does not return a promise, the promise.resolve() wrapper is automatically wrapped

Await the result of the expression on the right. If it waits for anything other than a Promise, the result is what it waits for. If it waits for a Promise, it blocks the code behind it, waiting for the promise to get its value

Function test(){return new Promise (resolve=>{setTimeout(()=>{resolve(“test”)},2000)})

async function test2(){const result=await test()console.log(result)}

test 2()

console.log('end')

//end  test