(原)Html5之WebWorker Api详解(网页中多线程)

Html代码 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>Insert title here</title>  
  6. <script type="text/javascript">  
  7.     window.onload = function() {  
  8.         var worker = new Worker("render-task.js");  
  9.   
  10.         worker.onmessage = function(event) {  
  11.             alert(eval(event.data).result);  
  12.         };  
  13.   
  14.         worker.postMessage('({content: "Test", command: ' + writeMessage + '})');         
  15.           
  16.     };  
  17.       
  18.     function writeMessage() {  
  19.   
  20.         var count = 0;  
  21.           
  22.         while(count <= 9999999) {  
  23.             count++;  
  24.         }  
  25.           
  26.         count++;  
  27.         return count;   
  28.     }  
  29. </script>  
  30.   
  31. </head>  
  32. <body>  
  33.   
  34. </body>  
  35. </html>  

 

 

接下来插入线程文件:

 

Js代码  收藏代码
  1. onmessage = function(event) {  
  2.       
  3.     var message = eval(event.data);  
  4.       
  5.     message.text = "Response";  
  6.     var result = message.command();  
  7.     postMessage('({text: "Response", result:' + result + '})');  
  8.       
  9. };  

 

根据测试:

1:线程文件中不可以使用document等BOM

2:线程文件中不可以使用调用地点的外部变量。

3:线程文件中可以调用调用地点的函数。但是必须通过json传递过来

4:线程文件中不可以有挂起的操作命令(alert等)

 

基本的数据调用传递流程

 

work.postMessage->线程的onmessage被触发

线程的onmessage文件内调用postMessage->work.onmessage被触发

posted @ 2011-12-09 12:44  YouDoce  阅读(511)  评论(0)    收藏  举报