js的webworker简单示例

前端的同学应该都知道js是单线程,异步IO的,但是其实他也是可以实现多线程的,只不过还是受制于主线程,不能够有一些操作dom的行为,说白了其实就是比较消耗cpu的计算量比较大,话不多说,下面我们可以直接看代码:
worker.html

  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title heretitle>  
head>  
<body>  
      
    <p>计数:<output id="result">output>p>  
    <button onclick="startWorker()">开始workerbutton>  
    <button onclick="endWorker()">停止workerbutton>    
    <div id='ceshi' onclick="ceshi()">点击我不会阻塞代码div>
    <br><br>  
    <script type="text/javascript">  
       var w;         
       function startWorker(){  
           if(typeof(Worker)!="undefined"){//浏览器支持web worker  
               if(typeof(w)=="undefined"){//w是未定义的,还没有开始计数        
                   w = new Worker("webworker.js");//创建一个Worker对象,利用Worker的构造函数  
               }  
               //onmessage是Worker对象的properties  
               w.onmessage = function(event){//事件处理函数,用来处理后端的web worker传递过来的消息  
                   document.getElementById("result").innerHTML=event.data;  
               };  
           }else{  
               document.getElementById("result").innerHTML="sorry,your browser does not support web workers";  
           }  
       }    
       function endWorker(){  
          w.terminate();//利用Worker对象的terminated方法,终止  
          w=undefined;  
       } 
       function ceshi(){
           console.log(555)
       }
    script>  
body>  
html>  
webworker.js
var i = 0;  

function timeCount(){  
  i = i + 1;  
  postMessage(i);//postMessage是Worker对象的方法,用于向html页面回传一段消息  
  setTimeout("timeCount()",500);//定时任务  
}  
timeCount();//加1计数,每500毫秒调用一次  

这里有一点要注意,new Worker(“webworker.js”) 里面的参数为另一个文件的路径,因为chrome是不支持直接在本地获取资源的,所以一定要在本地起一个服务,要不然会报跨域的问题,这个当时困扰我了好久啊!!!!!!!

你可能感兴趣的:(js常用知识)