本篇内容主要讲解“HTML5的WEB Workers怎么创建”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5的Web Workers怎么创建”吧! w
本篇内容主要讲解“HTML5的WEB Workers怎么创建”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5的Web Workers怎么创建”吧!
web worker是运行在后台的javascript，不会影响页面的性能。
什么是Web Worker？
当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击，拾取内容等等，而此时web worker在后台运行。
浏览器支持
所有主流浏览器均支持web worker，除了Internet Explorer。
HTML5 Web Workers实例
下面的例子创建了一个简单的web worker，在后台计数：
计数：
<！DOCTYPE html>
<html>
<身体>
<p>计数：<output id =“ result”> </ output> </ p>
<button onclick =“ startWorker（）”>开始工作者</ button>
<button onclick =“ stopWorker（）”>停止Worker </ button>
<br /> <br />
<脚本>
var w;
函数startWorker（）
{
if（typeof（Worker）！==“未定义”）
{
if（typeof（w）==“ undefined”）
{
w = new Worker（“ / example / html5 / demo_workers.js”）;
}
w.onmessage =函数（事件）{
document.getElementById（“ result”）。innerHTML = event.data;
};
}
别的
{
document.getElementById（“ result”）。innerHTML =“对不起，您的浏览器不支持Web Workers ...”;
}
}
函数stopWorker（）
{
w.terminate（）;
}
</ script>
</ body>
</ html>
检测Web Worker支持
在创建web worker之前，请检测用户的浏览器是否支持它：
if（typeof（Worker）！==“未定义”）
{
// 是的！网络工作者支持！
//一些代码.....
}
别的
{
// 对不起！不支持Web Worker。
}
创建网络工作者
现在，让我们在一个外部JavaScript中创建我们的web worker。
在这里，我们创建了计数脚本。该脚本存储于“ demo_workers.js”文件中：
var i = 0;
函数timedCount（）
{
i = i + 1;
postMessage(i);
setTimeout（“ timedCount（）”，500）;
}
timedCount（）;
以上代码中重要的部分是 postMessage（） 方法-它用于向HTML页面传回一段消息。
注释： web worker通常不使用如此简单的脚本，或者用于更耗费CPU资源的任务。
创建Web Worker对象
我们已经有了web worker文件，现在我们需要从HTML页面调用它。
下面的代码检测是否存在worker，如果不存在，-它会创建一个新的web worker对象，然后运行“ demo_workers.js”
if（typeof（w）==“ undefined”）
{
w = new Worker（“ demo_workers.js”）;
}
然后我们就可以从web worker发生和接收消息了。
向web worker添加一个“ onmessage”事件监听器：
w.onmessage =功能（事件）{
document.getElementById（“ result”）。innerHTML = event.data;
};
当web worker传递消息时，会执行事件监听器中的代码。
终止网络工作者
当我们创建web worker对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如果终止网络工作人员，并释放浏览器/计算机资源，请使用Terminate（）方法：
w.terminate（）;
完整的Web Worker实例代码
我们已经看到了.js文件中的Worker代码。下面是HTML页面的代码：
实例
<！DOCTYPE html>
<html>
<身体>
<p>计数：<output id =“ result”> </ output> </ p>
<button onclick =“ startWorker（）”>开始工作者</ button>
<button onclick =“ stopWorker（）”>停止工作者</ button>
<br /> <br />
<脚本>
var w;
函数startWorker（）
{
if（typeof（Worker）！==“未定义”）
{
if（typeof（w）==“ undefined”）
{
w = new Worker（“ demo_workers.js”）;
}
w.onmessage =函数（事件）{
document.getElementById（“ result”）。innerHTML = event.data;
};
}
别的
{
document.getElementById（“ result”）。innerHTML =“对不起，您的浏览器
不支持Web Workers ...”；
}
}
函数stopWorker（）
{
w.terminate（）;
}
</ script>
</ body>
</ html>
网络工作者和DOM
由于web worker位于外部文件中，它们无法访问下例JavaScript对象：
window对象
document对象
parent对象
到此，相信大家对“HTML5的Web Workers怎么创建”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
--结束END--
本文标题: HTML5的Web Workers怎么创建
本文链接: https://www.lsjlt.com/news/93443.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗？域名是网站的标识，简短且易于记忆，为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式，而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤：
1.寻找：买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述，包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
官方手机版
微信公众号
商务合作
0