Fork me on GitHub

多线程Worker初尝试

多线程这个概念，不知道听了多少遍。但是真滴没有去实操过。

前几天看视频听到作者说道关注技术本身，而不是总写业务代码。这几天依然思考着这个问题。于是从头开始重现了html文件的堵塞问题，重现了html文件的异步，然后想到了多线程。

重现html文件，代码堵塞代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>研究堵塞问题</title>
 6 </head>
 7 <body>
 8     <script type="text/javascript">
 9         /*setInterval(function(){
10             console.log(122);
11         },500);*/
12         for (var i = 0; i <100000; i++) {
13             console.log(i);
14         }
15 
16 
17     </script>
18     <div>
19         这是文字
20     </div>
21 </body>
22 </html>

异步代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>研究堵塞问题</title>
 6 </head>
 7 <body>
 8     <script type="text/javascript">
 9         setInterval(function(){
10             console.log(122);
11         },500);
12         /*for (var i = 0; i <100000; i++) {
13             console.log(i);
14         }
15 
16 
17     </script>
18     <div>
19         这是文字
20     </div>
21 </body>
22 </html>

多线程代码html文件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="text" name="ipt" id="ipt" value="" />
 9         <button id="start">start</button>
10         <button id="stop">stop</button>
11         <button id="ale">alert</button>
12         <script type="text/javascript">
13             var ipt = document.getElementById("ipt");
14             var stop = document.getElementById("stop");
15             var start = document.getElementById("start");
16             var ale = document.getElementById("ale");
17             var worker;
18            
19             stop.addEventListener("click",function(){
20                 //用于关闭worker线程
21                 if(typeof(worker)=="undefined"){
22                   return;
23                 }
24                 worker.terminate();
25             });
26             start.addEventListener("click",function(){
27                 //开起worker线程
28                 //
29                  worker = new Worker("test22.js");
30                   worker.onmessage = function(event){
31                 ipt.value = event.data;
32             };
33                 console.warn('222');
34             });
35             ale.addEventListener("click",function(){
36                 alert("i'm a dialog");
37             });
38         </script>
39     </body>
40 </html>

test22.js代码

1 var i = 0;
2 function mainFunc(){
3     i++;
4     //把i发送到浏览器的js引擎线程里
5     postMessage(i);
6 }
7 var id = setInterval(mainFunc,1000);

测试显示，Worker确实可以实现并行运行。至于多线程的意义有文章建议用多线程来解决文件上传问题。

本文结束。

posted @ 2018-06-07 15:07  我站在山顶上  阅读(537)  评论(0)  编辑  收藏  举报