在Html 5诞生之后,我们可以使用javascript来实现多线程处理。H5 新增了一个web workers api,使用这个API,用户可以很容易地创建在后台运行的线程,H5 中被称为workder ,如果将费时比家长的操作放到后台去执行,对用户在界面的操作就完全没有影响了。

创建后台线程也十分的简单,只要在workder类的构造器中将需要执行的脚本文件的url作为参数,然后创建worker对象就可以了,如下所示

var worker = new Worker("test.js")

在创建了worker对象之后,我们可以通过worker的postMessage()来向后台线程发送消息。可以使用onmessage(msg) 来获取消息。

下面我们来看一下多线程之间通信,在这里实现多个worker之间通信实际上需要借助主线程,子线程A将消息发送给主线程,然后主线程将A线程发送的消息发送给B.下面是实现的代码。

a href="http://www.codesec.net/kf/qianduan/css/" target="_blank" class="keylink">html>
<script>
var sendWorker = new Worker("js/send.js"); //消息发送线程
var receiveWorker = new Worker("js/receive.js"); //消息接送线程
sendWorker.onmessage = function(msg)
{
receiveWorker.postMessage(msg.data); //接收到消息之后马上发给接受线程
}
function sendMessage()
{
sendWorker.postMessage(""); //启动消息发送线程发送消息。
}
</script>

send.js

onmessage = function(msg)
{
postMessage("这个是子线程A 发送的消息");// 线程A 发出消息
}

receive.js

onmessage = function(msg)
{
//alert(msg.data); //这句话会报错,因为当前这个方法是在子线程中执行,所以不能使用alert,因为这个会影响UI
console.log(msg.data); // 接受线程在控制台输出
}

最后说一下workder之中可用的变量,函数,类

self :该关键字用来本线程的范围。

postMessage(msg) 向创建线程的源窗口发送消息。

onmessage 获取接受消息的事件 句柄。

importScripts(urls) 导入其他的javascript脚本。

使用navigator对象。

使用sessionStorage/localStorage

使用ajax请求

嵌套线程

close结束本线程。

setTimeout/setInterval

eval().isNaN()等,可以使用所有javascript核心函数。

object

可以使用WebSockets api.

JavaScript 中的多线程通信的方法的更多相关文章

  1. 总结Javascript中数组各种去重的方法

    相信大家都知道网上关于Javascript中数组去重的方法很多,这篇文章给大家总结Javascript中数组各种去重的方法,相信本文对大家学习和使用Javascript具有一定的参考借鉴价值,有需要的 ...

  2. JavaScript中类似PHP的uniqid()方法

    JavaScript中类似PHP的uniqid()方法: function generateUIDNotMoreThan1million() { return ("0000" + ...

  3. 深入了解JavaScript中的Symbol的使用方法

    这篇文章主要介绍了深入了解JavaScript中的Symbol的使用方法,本文针对ES6版本的JS进行讲解,需要的朋友可以参考下 Symbol 是什么? Symbols 不是图标,也不是指在代码中可以 ...

  4. JavaScript中Number常用属性和方法

    title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...

  5. Javascript中对象的Obeject.defineProperty()方法-------------(ES5/个人理解)

    在讲到Obeject.defineProperty()方法之前先得说明一下ECMAScript中有两种属性:数据属性和访问器属性. 两种属性存在的意义:描述对象属性(key)的一些特性,因为这些属性是 ...

  6. Javascript中的迭代、归并方法

    迭代方法 在Javascript中迭代方法个人觉得尤为重要,在很多时候都会有实际上的需求,javascript提供了5个迭代方法来供我们操作,它们分别为: every() 对数组中的每一个项运用给定的 ...

  7. 在javascript中使用com组件的方法

    转载自:  http://dhailin.blog.163.com/blog/static/230738322011128102043880/ 首先创建一个COM组件,插入一个双接口Itest,在此接 ...

  8. javascript中对象的不同创建方法

    javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascr ...

  9. Javascript 中创建自定义对象的方法(设计模式)

    Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. var ...

随机推荐

  1. html 按钮跳转问题(及其相关)

    1.点击一个按钮跳转到另一个页面 (网址)   两种写法: <button onclick="{location.href='location.html'}">获取现在 ...

  2. Python数据挖掘之决策树DTC数据分析及鸢尾数据集分析

    Python数据挖掘之决策树DTC数据分析及鸢尾数据集分析 今天主要讲述的内容是关于决策树的知识,主要包括以下内容:1.分类及决策树算法介绍2.鸢尾花卉数据集介绍3.决策树实现鸢尾数据集分析.希望这篇 ...

  3. Gen8折腾日记

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月7日,可惜在博客园这边不能修改发布时间.) 放假伊始,老大订购了两台服务器,一台是Dell的R630,用于其他 ...

  4. PKU--3628 Bookshelf 2(01背包)

    题目http://poj.org/problem?id=3628 分析:给定一堆牛的高度,把牛叠加起来的高度超过牛棚的高度. 且是牛叠加的高度与牛棚高度之差最小. 把牛叠加的高度看作是背包的容量,利用 ...

  5. git add命令后出现Another git process seems to be running in this repositor...错误提示

    问题原因 在控制台使用git命令操作时,使用了 git commit 进入了commit信息书写页面,大多数人因为不太熟悉vim的操作导致不知怎么结束编写,就进行了直接关闭控制台的操作,但是此时git ...

  6. oauth2使用心得-----基本概念以及认证服务器搭建

    应用场景 我们假设你有一个“云笔记”产品,并提供了“云笔记服务”和“云相册服务”,此时用户需要在不同的设备(PC.Android.iPhone.TV.Watch)上去访问这些“资源”(笔记,图片) 那 ...

  7. mysql大数据表优化

    1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...

  8. (二)通过JAVA调用SAP接口 (增加一二级参数)

    (二)通过JAVA调用SAP接口 (增加一二级参数) 一.建立sap连接 请参考我的上一篇博客 JAVA连接SAP 二.测试项目环境准备 在上一篇操作下已经建好的环境后,在上面的基础上新增类即可 三. ...

  9. LA4123 Glenhow Museum

    题目大意:蓝书P115 不愧是WF的题 不难发现R的个数为L/2 + 2,O的个数为L/2 - 2 三种做法,第一种比较麻烦,dp[i][j][k][l]表示i个R,j个O,第一个元素是(k)R,最后 ...

  10. Luogu P1462 通往奥格瑞玛的道路(最短路+二分)

    P1462 通往奥格瑞玛的道路 题面 题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己 ...