Javascript asynchronous programming

ArticleDirectory

• SetTimeout (slow, takes about 10 sec)
• IMG. onerror (data: URI)
• Script. onreadystatechange
• Script. onload (data: URI)
• Xhr. onreadystatechange (data: text/plain, foo)
• Self. postmessage

It is like waiting in the queue. The people in front of the queue are busy and suddenly go to the toilet. the people behind the queue are blocked here. Therefore, we need to let the people in front of the queue die and let the people behind follow up ...... Ajax is the concept. The request continues, but we can do other things.

The setTimeout Function of BOM is implemented in Javascript, but Dom operations also provide a series of implementations. For example, XMLHTTPRequest object and script tag onreadystatechange callback, image onload and onerror callback, IFRAME onload, Dom element Event Callback, and HTML5 cross-domain message transmission postmessage, loading of QuickTime and flash objects ......

The zero-second delay of setTimeout was widely publicized in China in the past few years. However, setTimeout is the slowest of all latencies and takes at least 10 milliseconds. If setTimeout is used to develop special effects, this effect runs slowly. The following is a performance test:Lang = "en">

SetTimeout (slow, takes about 10 sec)

 
Function async (callback) {setTimeout (callback, 0 );}
 

IMG. onerror (data: URI)

 
Function async (callback) {var IMG = new image; IMG. addeventlistener ('error', callback, false); IMG. src = 'data:, foo ';}
 

Script. onreadystatechange

Function async (callback) {var script = document. createelement ("script"); script. type = "text/JavaScript"; script. src = "javascript:"; script. onreadystatechange = function () {document. body. removechild (SCRIPT); callback ();} document. body. appendchild (SCRIPT );}
 

Script. onload (data: URI)

 
Function async (callback) {var script = document. createelement ('script'); script. onload = function () {document. body. removechild (SCRIPT); callback ();} script. src = 'data: text/JavaScript, '; document. body. appendchild (SCRIPT );}
 

Xhr. onreadystatechange (data: text/plain, foo)

Function async (callback) {var xhr = new XMLHttpRequest; xhr. open ('get', 'Data: text/plain, foo', true); xhr. onreadystatechange = function () {xhr. onreadystatechange = NULL; callback () ;}; xhr. send (null );}
 

Self. postmessage

 
Function async (callback) {var n = ++ async. count; window. addeventlistener ('message', function (e) {If (E. data = N) {window. removeeventlistener ('message', arguments. callee, false); callback () ;}, false); window. postmessage (n, location. protocol + "//" + location. host);} async. count = 0;