HTML5中Web Worker技术的使用实例
检测 Web Worker 支持
在创建 web worker 之前,请检测用户的浏览器是否支持它:
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
创建 web worker 文件
现在,让我们在一个外部 JavaScript 中创建我们的 web worker。
在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:
var i=0; function 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=function(event){
document.getElementById("result").innerHTML=event.data;
};
当 web worker 传递消息时,会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
终止 Web Worker
当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
w.terminate();
完整的 Web Worker 实例代码
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:
实例
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
HTML5中Web Worker技术的使用实例相关推荐
- 在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示
在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示 接触前端时间不长,费了一些时间 img{display:block;max-width:100%;margin:auto ...
- html5之web worker
Web Worker 在本文中 与 Web Worker 进行双向通信 WindowTimers 在 IE10 Platform Preview 4 中对 Web Worker 的更新 API 参考 ...
- web worker技术-js新线程
web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...
- Angular 中 web worker的使用
web worker就是在web应用程序中使用的worker.这个worker是独立于web主线程的,在后台运行的线程. web worker的优点就是可以将工作交给独立的其他线程去做,这样就不会阻塞 ...
- HTML5中web本地存储
1.1.1 什么是html5web本地存储(web存储)? html5web本地存储可以在本地存储用户的浏览数据.web本地存储相对cookie更加安全和快速,它的数据不会保存在服务器上.它也可以存储 ...
- HTML5 中Web存储问题
HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式.注意: Internet Explorer 7 及更早IE版本不支持web 存储. 什么是 HTML5 Web ...
- 如何使用HTML5中Web存储?
使用 HTML5 Web 存储, 可以在本地存储用户的浏览数据. 在 HTML5 之前,本地存储使用的是 cookie. Web 存储的优势 更加安全 更加快速 可以存储大量的数据 每个服务器请求都不 ...
- 主进程中发生了一个javascript错误_知道html5 Web Worker标准吗?能实现JavaScript的多线程?
js为什么是单线程? 主要是因为最开始javascript是单纯的服务于浏览器的一种脚步语言(那时候没有nodejs).浏览器是为了渲染网页,通过dom与用户交互,如果一个线程需要给dom执行clic ...
- HTML5中最重要的技术点有哪些
HTML5在发展中不断的更新其自身技术,所以即便是HTML5从业者也会需要不断的去学习.掌握其新特性.本文总结一些HTML5中重要的技术点,希望对你有帮助. 为什么HTML5里面我们不需要DTD(Do ...
最新文章
- h5 返回上一页并且刷新页面
- 关于 top、left 结合 translate 实现居中的原理探讨
- Entity Framework 6 Recipes 2nd Edition(9-1)译-用Web Api更新单独分离的实体
- 通用权限管理系统组件中简易员工档案管理模块参考
- No module named '__main__.demo1'; '__main__' is not a package
- 盘点最著名的10位伟大的程序员
- CSS3的常用属性(一)
- C++语言string类介绍和示例
- 【基础】网络常见的9大命令,非常实用!
- NetSuite 在中国 - 一个全程信息化管理平台
- Tomcat 8 解决“At least one JAR was scanned for TLDs yet contained no TLDs”问题
- 如何查看 Swift 的源代码
- 照片太大了怎么改小kb?图片压缩在线处理方法
- HBase2.x(十一)HBase 读流程
- Time.deltaTime 用法
- 爬虫、蜘蛛、机器人有什么区别?
- [生而为人-思考] 读《网易一千零一夜》笔记
- openstack研究意义_OpenStack如何推动CERN的研究
- iOS App 友盟授权登录后,如何获取微信unionid
- springboot宠物医院管理系统
热门文章
- android已经点击,【已解决】android中点击其他的(如Button等)但是EditText却没有失去焦点...
- 用友UI层获取机构的方法
- 201771010118马昕璐
- android之seekbar
- 排列、组合问题(递归)
- NO1:在Windows端安装SecureCRT来连接Linux
- 移动端ajax,jQuery基于$.ajax设置移动端click超时处理方法
- 思科服务器 vmware虚拟多少个hba卡,利用Cisco UCS 管理虚拟机网络(上)
- serialport通过usb通讯_IOT串口通讯-RS232/RS485
- 1 京东_推荐好友拿好礼 | 每1积分可兑换30元京东电子卡