博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
适合0基础的web开发系列教程-HTML5 Web Workers
阅读量:6875 次
发布时间:2019-06-26

本文共 1215 字,大约阅读时间需要 4 分钟。

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

下面的例子创建了一个简单的 web worker,在后台计数:

 

demo_workers.js 文件代码:

var i=0;function timedCount(){    i=i+1;    postMessage(i);    setTimeout("timedCount()",500);}timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

在创建 web worker 之前,请检测用户的浏览器是否支持它:

if(typeof(Worker)!=="undefined"){    // 是的! Web worker 支持!    // 一些代码.....}else{    //抱歉! 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;};

  

<p当 web="" worker="" 传递消息时,会执行事件监听器中的代码。event.data="" 中存有来自="" event.data="" 的数据。<="" p="">


终止 Web Worker

当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

w.terminate();

 

完整代码:

 

 
夜鹰教程QQ:1416759661

计数:

注意: Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.

  

转载于:https://www.cnblogs.com/yyjcw/p/10219621.html

你可能感兴趣的文章
Django rest framework(8)---- 视图和渲染器
查看>>
UIPickView简单Demo
查看>>
铁大FaceBook的使用体验副本
查看>>
Android--简单的三级菜单
查看>>
java10-异常处理
查看>>
highcharts 条形图
查看>>
一个多项式问题
查看>>
Ansible 入门指南 - 安装及 Ad-Hoc 命令使用
查看>>
python练习七—P2P下载
查看>>
巨强大的免费LOGO在线制作工具
查看>>
_____________________背包——————————————————2546——————————————...
查看>>
zencart通过产品id 批量添加推荐产品
查看>>
实习第六天
查看>>
Careercup | Chapter 4
查看>>
@Value的使用
查看>>
软件工程学期总结
查看>>
解析html和采集网页的神兵利器
查看>>
自定义Json解析工具
查看>>
3Sum
查看>>
python-集合(set)
查看>>