HTML5 Web Workers

最新推荐文章于 2025-04-02 05:05:31 发布

珊瑚贝

最新推荐文章于 2025-04-02 05:05:31 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

分类专栏：编程开发

本文链接：https://blog.youkuaiyun.com/chenzhao635/article/details/104169111

编程开发专栏收录该内容

46 篇文章

订阅专栏

本文介绍HTML5 WebWorker技术，演示如何通过WebWorker在后台执行耗时任务，如求和运算，而不影响用户界面响应。文章详细展示了WebWorker的创建、通信过程及其实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述：Web Worker是在HTML5中新增的，用来在Web应用程序中实现后台处理的一项技术。使用这个API，用户可以很容易地创建在后台运行的线程（在HTML5中称为worker），如果将可能耗费较长时间的处理交给后台去执行，对用户在前台页面中执行的操作就完全没有影响了。

创建后台线程的步骤：只要在Worker类的构造器中，将需要在后台线程中执行的脚本文件的URL作为参数，然后创建Worker对象就可以了，代码如下所示。
var worker = new Worker("worker.js");
注意：在后台线程中是不能访问页面或窗口对象的。如果在后台线程的
脚本文件中使用到window对象或document对象，则会引起错误的发
生。
流程图：

Web Worker应用实例——求和运算

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
// 创建执行运算的线程
var worker = new Worker("kwb.js");
//接收从线程中传出的计算结果
worker.onmessage = function(event) 
{
    //消息文本放置在data属性中,可以是任何JavaScript对象.
    alert("合计值为"   event.data   "。");
};
function kwb() 
{
    //获取文本框的值
	var num1 = parseInt(document.getElementById("num1").value);
	var num = parseInt(document.getElementById("num").value);
   //对2个文本框提交的值进行判断
   if(num<num1){		
	   alert('提交的运算不符合要求');
	   return false;
	}
	//将获取的文本框的值用@拼接成字符串
	var subs=num1 '@' num;
	//将数值传给线程
	worker.postMessage(subs);
}
</script>
</head>
<body>
<h1>对给定2个数字之间所有数值的计算</h1>
<hr color="#FF0000"><br>
初始数值:<input type="text1" id="num1"><br><br>
终极数值:<input type="text" id="num"><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button οnclick="kwb()">计算</button>
</body>

onmessage = function(event){
    var num = event.data;
	var intarray=num.split('@'); //返回字符串中数字分隔符为@
	var result = 0;
   for (var i = parseInt(intarray[0]); i <= intarray[1]; i  ) {	//执行求和运算
   result  = i;
   }
	postMessage( result); //返回运算结果拼接成的字符串
}