HTML5 Web Workers 使用案例

最新推荐文章于 2024-10-09 21:28:36 发布

个人知识管理布道师

最新推荐文章于 2024-10-09 21:28:36 发布

阅读量2.3k

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/u010689306/article/details/51732566

版权

HTML5 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

前端(HTML

2 篇文章 0 订阅

订阅专栏

1 什么是Web Workers?

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

2 使用案例

webworkers.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 οnclick="startWorker()">开始worker</button>
    <button οnclick="endWorker()">停止worker</button>  
    <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;
       }
    </script>
</body>
</html>

在后台运行的web worker js文件,webworker.js

var i = 0;

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

timeCount();//加1计数,每500毫秒调用一次

3 效果截图