HTML5中Web Worker技术的使用实例

web worker是html5中新特性中非常吸引人的技术亮点之一,我们可以把它理解为javascript中的多线程技术,我们知道javascript语言的执行环境是单线程的,浏览器执行某段程序的时候会阻塞直到运行结束后再恢复到正常状态,而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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

选择技术栈构建通用平台

Java社区中有很多关于Spring vs Java EE的话题。 一群人会争辩说您应该使用一个而不是其他。等等。当我看到这一点时&#xff0c;我不禁要想为什么我们不能同时使用它们呢&#xff1f; 实际上&#xff0c;我认为有效地使用它们会为构建基础架构创建一个伟大的技术堆栈&#xff…

模式的秘密--工厂模式

工厂模式概念&#xff1a; 实例化对象&#xff0c;用工厂方法代替new操作工厂模式包括工厂方法模式和抽象工厂模式抽象工厂模式是工厂方法模式的扩展工厂模式的意图&#xff1a; 定义一个接口创建对象&#xff0c;但是让子类决定哪些类需要被实例化。工厂方法把实例化的工作推迟…

mysql定时清空表数据_Mysql实现定时清空一张表的旧数据并保留几条数据

要达到如下目的&#xff1a;Mysql数据库会每隔一段时间(可以是2小时&#xff0c;也可以是一天&#xff0c;这个可以自定义)&#xff0c;定时对一张库中的表做一个判断&#xff0c;如果这张表的数据超过了20条(这个数据也是自定义的&#xff0c;也可以是200条)&#xff0c;就保留…

Python中生成器generator和迭代器Iterator的使用方法

一、生成器 1. 生成器的定义 把所需要值得计算方法储存起来,不会先直接生成数值,而是等到什么时候使用什么时候生成,每次生成一个,减少计算机占用内存空间2. 生成器的创建方式 第一种只要把一个列表生成式的 [ ] 改成 ( )ret (n 1 for n in range(0,10)) # 返回值是生成了一个…

Java 8中使用Lambda表达式的策略模式

策略模式是“ 设计模式&#xff1a;可重用对象的元素”书中的模式之一 。 本书所述的策略模式的意图是&#xff1a; 定义一系列算法&#xff0c;封装每个算法&#xff0c;并使它们可互换。 策略使算法独立于使用该算法的客户端而变化。 在本文中&#xff0c;我想给出一个或两个…

Html5移动开发之Localstorage(本地存储)

HTML5本地存储Localstorage自从Html5中出现了本地存储的&#xff08;LocalStorage)的概念后&#xff0c;很多人都会想这个东西和我们传统web开发中的Cookie有什么特别之处&#xff0c;当然笔者也是其中之一&#xff0c;也难怪&#xff0c;以前用惯了cookie对于新出现的事物总是…

php mysql 正则_MySQL 正则表达式

MySQL 正则表达式在前面的章节我们已经了解到MySQL可以通过 LIKE ...% 来进行模糊匹配。MySQL 同样也支持其他正则表达式的匹配&#xff0c; MySQL中使用 REGEXP 操作符来进行正则表达式匹配。如果您了解PHP或Perl&#xff0c;那么操作起来就非常简单&#xff0c;因为MySQL的正…

Linux自动人机交互expect

exp_test.sh文件 #!/bin/bash/expect ## exp_test.sh set timeout -1; spawn ssh localhost; expect {"(yes/no)" {send "yes\r";exp_continue;}"password:" {send "hadoop\r";exp_continue;}eof {exit 0;} } 执行&#xff1a;expect …

使用Spring Integration聚合异步结果

嗨&#xff0c;我遇到了一个问题&#xff0c;该问题使用Spring Integration具有非常好的解决方案。 很多时候&#xff0c;我们需要一种将消息分发到未知数量的目的地的方案。 为此&#xff0c;我们使用主题方法。 但是有时&#xff0c;我们还希望从收到消息的所有目的地接收答案…

Html5开发之链接标签nav的用法

HTML(<nav>)元素用来表示一个含有多个超链接的区域&#xff0c;这个区域的连接可以连接到其他页面&#xff0c;也可以连接到本页面内部其他部分。用法说明:并不是所有的链接都必须使用<nav>元素,它只用来将一些热门的链接放入导航栏,例如<footer>元素就常用来…

java response 获得code_Java教程分享使用HttpClient抓取页面内容

Java教程分享使用HttpClient抓取页面内容&#xff0c;使用HttpClient工具来发送Http请求1.简介HttpClient 是 Apache Jakarta Common 下的子项目&#xff0c;用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包&#xff0c;并且它支持 HTTP 协议最新的版本和…

关于Function原型对象和Object原型对象的一些疑惑

网上有一道美团外卖的面试题是这样的&#xff1a;Function.prototype.a a; Object.prototype.b b; function Person(){}; var p new Person(); console.log(p.a: p.a); // p.a: undefined console.log(p.b: p.b); // p.b: b问为什么&#xff1f;有不少同学第一眼看上去就觉…

HTML5 实现离线数据缓存

1.配置缓存文件 cache manifestMIME TYPE&#xff1a;text/cache-manifest文件名称&#xff1a;name.appcache作用&#xff1a;用于配置需要缓存的文件2.使用方法在服务器上添加MIME TYPE在apache virtual host 中添加[plain] view plaincopyAddType text/cache-manifest .appc…

pytest.7.常见套路

From: http://www.testclass.net/pytest/common_useage/ 在使用pytest的时候&#xff0c;下面这些问题我们可能会经常遇到&#xff0c;这里给出官方的解决方案&#xff0c;按照套路来执行就可以了。 基础用法 把命令行参数传入到用例动态添加命令行参数根据命令行参数来忽略用例…

linux mysql 5.6.23_MySQL 5.6.23升级到MySQL 5.7.9

MySQL 5.6.23升级到MySQL 5.7.9MySQL 5.7.9新特性一、安全性1.1. 用户表 mysql.user 的 plugin字段不允许为空&#xff0c; 默认值是 mysql_native_password&#xff0c;而不是 mysql_old_password&#xff0c;不再支持旧密码格式;1.2. 增加密码过期机制&#xff0c;过期后需要…

Spring Data JPA教程第一部分:配置

Spring Data JPA是一个旨在简化基于JPA的存储库的创建并减少与数据库通信所需的代码量的项目。 在我的工作和个人爱好项目中&#xff0c;我已经使用了一段时间&#xff0c;确实使事情变得更加简单和整洁。 现在是时候与您分享我的知识了。 这是我的Spring Data JPA教程的第一部…

2018-03-02

1、首先我得重新在git设置一下身份的名字和邮箱&#xff08;因为当初都忘了设置啥了&#xff0c;因为遇到坑了&#xff09;进入到需要提交的文件夹底下&#xff08;因为直接打开git Bash&#xff0c;在没有路径的情况下&#xff0c;根本没&#xff01;法&#xff01;改&#xf…

《算法通关村——再次透彻理解动态规划》

《算法通关村——透彻理解动态规划》 91. 解码方法 一条包含字母 A-Z 的消息通过以下映射进行了 编码 &#xff1a; A -> "1" B -> "2" ... Z -> "26"要 解码 已编码的消息&#xff0c;所有数字必须基于上述映射的方法&#xff0c;反…

html5新特性:异步上传文件

<!DOCTYPE html><html><head><meta charset"utf-8"/><title>html5文件上传</title></head><body><input type"file" name"file" id"file" /><br/><input type"s…

查看环境变量有无配置成功等命令操作

查看环境变量有无配置成功 &#xff1a;windowR cmd set&#xff08;回车&#xff09; 现在可以看到配置成功的环境变量NVM_HOME NVM_SYMLINK等环境变量 也可以单独查看某个变量有无配置成功,例如set NVM—HOME. 转载于:https://www.cnblogs.com/JavascriptAndHtml5/p/9469932…