js的webworker简单示例

最新推荐文章于 2024-06-04 22:53:19 发布

xyf_coco

最新推荐文章于 2024-06-04 22:53:19 发布

阅读量2.8k

点赞数

分类专栏： js常用知识文章标签： webworker

本文链接：https://blog.csdn.net/xyf_coco/article/details/80606731

版权

js常用知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <!-- web worker是运行在后台的javascript，不会影响页面的性能 -->  
    <p>计数:<output id="result"></output></p>  
    <button onclick="startWorker()">开始worker</button>  
    <button onclick="endWorker()">停止worker</button>    
    <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是不支持直接在本地获取资源的，所以一定要在本地起一个服务，要不然会报跨域的问题，这个当时困扰我了好久啊！！！！！！！

xyf_coco

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js的webworker简单示例

前端的同学应该都知道js是单线程，异步IO的，但是其实他也是可以实现多线程的，只不过还是受制于主线程，不能够有一些操作dom的行为，说白了其实就是比较消耗cpu的计算量比较大，话不多说，下面我们可以直接看代码： worker.html&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&g...
复制链接

扫一扫