Home > Developer > Web Develop
A few days ago, a company had such a problem. Write a JavaScript function that asynchronously loads JS on the page, executes the callback after the load finishes, and executes under IE and chrome.
On this topic I wrote a DOM method asynchronous loading JS example, you can give the asynchronous do not understand the reference of the friend to feel.
As we all know, JS is a single-threaded language, its event loop mechanism can look at Nanyi this blog, the explanation is very good
Http://www.ruanyifeng.com/blog/2014/10/event-loop.html
Let's take a look at the example I wrote
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>JS Asynchronous loading</title>5 <MetaCharSet= "UTF-8">6 </Head>7 <Body>8 9 </Body>Ten <Scripttype= "Text/javascript"src= "Js/call.js"></Script> One </HTML>
The code in the HTML <script> tag, or in the file referenced by SRC, is loaded synchronously. The example inside Call.js is synchronous loading.
Call.js
1 functionloadscript (URL, callback) {2 varScript = document.createelement ("Script")3Script.type = "Text/javascript";4 if(script.readystate) {//IE5Script.onreadystatechange =function() {6 if(Script.readystate = = "Loaded" | |7Script.readystate = = "complete") {8Script.onreadystatechange =NULL;9 callback ();Ten } One }; A}Else{//Others:firefox, Safari, Chrome, and Opera -Script.onload =function() { - callback (); the }; - } -SCRIPT.SRC =URL; -Console.log ("Xx.js execution after AppendChild"); + document.body.appendChild (script); - } + varURL1 = ' Js/11.js '; A varUrl2 = ' Js/12.js '; at functionBack1 () { -Console.log ("Back1 callback function is executed"); - } - functionBack2 () { -Console.log ("Back2 callback function is executed"); - } in functionHello () { -Console.log ("Hello world! this is a normal synchronization function"); to } + Loadscript (URL1,BACK1); - hello (); theLoadscript (URL2,BACK2);
11.js
Console.log ("This is 11.js executed");12.js
Console.log ("This is 12.js");Now let's look at the results of the operation:
Let's take a look at the order in which we call functions
Loadscript (URL1,BACK1);
Hello ();
Loadscript (URL2,BACK2);
If we follow the synchronous execution, we guess the usual result should be:
Xx.js execution after AppendChild
BACK1 callback function is executed
Hello world! This is a normal synchronization function
Xx.js execution after AppendChild
Back2 callback function is executed
Of course, the result cannot be this way, because we take it asynchronously.
Xx.js executes asynchronously after the appendchild executes.
Take a look at the running results think about async.
A small example of understanding JS asynchronous loading
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
