Home > Developer > JavaScript
The magic weapon is Concurrent. Thread, which is actually a js library. You can download the source code from the website. How can you use it?
Simple
Concurrent. thread. create (f, a1, a2 ,...) f. For the function to be called, a1 and a2 are the parameters of the function. In this way, a thread is created, and multiple threads can be created at the same time, and they will be executed at the same time, this library also provides many methods, similar to the Thread usage methods in other languages, such as Concurrent. thread. stop. Go to the website to learn more.
Copy codeThe Code is as follows:
<Html>
<Body>
<Script type = "text/javascript" src = "Concurrent. Thread. Compiler. js"> </script>
<Script type = "text/javascript">
Function hello (){
Document. body. innerHTML + = "H ";
Document. body. innerHTML + = "e ";
Document. body. innerHTML + = "l ";
Document. body. innerHTML + = "l ";
Document. body. innerHTML + = "o ";
Document. body. innerHTML + = ",";
Document. body. innerHTML + = "";
Document. body. innerHTML + = "w ";
Document. body. innerHTML + = "o ";
Document. body. innerHTML + = "r ";
Document. body. innerHTML + = "l ";
Document. body. innerHTML + = "d ";
Document. body. innerHTML + = "! ";
}
Concurrent. Thread. create (hello );
</Script>
</Body>
</Html>
Zhang Kaifeng, author of Daisuke Maki
Although more and more websites are developing with AJAX technology, building a complex AJAX application is still a challenge. What are the main causes of these difficulties? Is it about asynchronous communication with the server? Or is there a GUI program design problem? These two tasks are usually completed by the desktop program. Why is it so difficult to develop an AJAX application that can implement the same function?
Difficulties in AJAX Development
Let's use a simple example to understand this problem. Suppose you want to build a tree-structured announcement board system (BBS), which can interact with the server based on user requests, dynamically load the information of each article, rather than loading all the article information from the server at a time. Each article has four attributes: The system can be used as a unique ID, post name, article content, and an array containing all its sub-article IDs. Assume that a function named getArticle () can load the information of an article. The parameter received by this function is the ID of the document to be loaded. You can obtain the document information from the server. The returned object contains four attributes related to the document: id, name, content, and children. The routine is as follows:
Function (id ){
Var a = getArticle (id );
Document. writeln (a. name +"
"+ A. content );
}
However, you may notice that repeatedly calling this function with the same article ID requires repeated and useless communication with the server. To solve this problem, you can use the getArticleWithCache () function, which is equivalent to a getArticle () with caching capability (). In this example, the data returned by getArticle () is saved as a global variable:
Var cache = {};
Function getArticleWithCache (id ){
If (! Cache [id]) {
Cache [id] = getArticle (id );
}
Return cache [id];
}
Now we have cached the read articles. Let's take another look at the function backgroundLoad (), which applies the cache mechanism we mentioned above to load all the article information. Its purpose is to pre-load all its sub-articles from the background when reading an article. Because the data in the article is tree-structured, it is easy to write a recursive algorithm to traverse the tree and load all the articles:
Function backgroundLoad (ids ){
For (var I = 0; I <ids. length; I ++ ){
Var a = getArticleWithCache (ids [I]);
BackgroundLoad (a. children );
}
}
The backgroundLoad () function receives an ID array as a parameter, and then calls the previously defined getArticldWithCache () method through each ID to cache the article corresponding to each ID. Then, the backgroundLoad () method is recursively called through the subarticle ID array of the loaded article, so that the entire article tree is cached.
So far, everything seems perfect. However, as long as you have experience developing AJAX applications, you should know that this naive implementation method will not succeed at all. The basis of this example is that getArticle () uses synchronous communication by default. However, as a basic principle, JavaScript requires asynchronous communication when interacting with the server because it is single-threaded. For simplicity, putting everything (including GUI events and rendering) in one thread is a good program model, this eliminates the need to consider the complex issues of thread synchronization. On the other hand, he also exposed a serious problem in application development. The single-threaded environment seems to respond quickly to user requests, but when the thread is busy processing other things (such as calling getArticle ()), you cannot respond to users' mouse clicks or keyboard operations.
What will happen if synchronous communication is performed in this single-threaded environment? Synchronous communication interrupts the execution of the browser until the communication result is obtained. While waiting for the communication result, the thread stops responding to the user and remains locked until the call is returned. For this reason, when the browser is waiting for the server response, it cannot respond to user behavior, so it looks like frozen. When getArticleWithCache () and backgroundLoad () are executed, they are all based on the getArticle () function. Since downloading all articles may take a considerable period of time, for the backgroundLoad () function, the freezing of browsers in this period of time is a very serious problem-since all browsers have been frozen, it is impossible for users to execute background pre-loading data first when they are reading articles, in this case, the current article cannot be read.
As mentioned above, since synchronous communication may cause such a serious problem, JavaScript regards asynchronous communication as a basic principle. Therefore, we can rewrite the above program based on asynchronous communication. JavaScript requires writing asynchronous communication programs in an event-driven programming method. In many cases, you must specify a callback program. Once a communication response is received, this function will be called. For example, the getArticleWithCache () defined above can be written as follows:
Var cache = {};
Function getArticleWithCache (id, callback ){
If (! Cache [id]) {
Callback (cache [id]);
} Else {
GetArticle (id, function (){
Cache [id] =;
Callback ();
});
}
}
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
