多线程这个概念，不知道听了多少遍。但是真滴没有去实操过。
前几天看视频听到作者说道关注技术本身，而不是总写业务代码。这几天依然思考着这个问题。于是从头开始重现了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确实可以实现并行运行。至于多线程的意义有文章建议用多线程来解决文件上传问题。
本文结束。