在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. typedef int (init_fnc_t) (void)和typedef int (*init_fnc_t) (void)

    1.typedef  int (init_fnc_t) (void);表示定义init_fnc_t为函数类型,该函数返回int型,无参数.而“init_fnc_t  *init_sequence[]= ...

  2. 用Axure RP7创建响应式原型教程

    自从几年前响应式技术开始应用时,创建响应式原型就成为了很多人苦恼的事情.响应式设计用一种非常优雅的方式处理为多种设备类型使用HTML和CSS编码的应用,但是提供给UX专业人士的原型工具却没有具备同样品 ...

  3. 解析Request和Response

    简介: Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. request和response对象即然代表请求和响应 ...

  4. python3-常用模块之序列化

    序列化 : 把其他的数据类型转换成 字符串或者bytes 序列 : 列表.元组.字符串.bytes 为什么要把其他数据类型转换成字符串? 能够在网络上传输的只能是bytes,能够存储在文件里的只有by ...

  5. js 使用script或template标签:分离js代码template中的HTML元素

    参考:https://www.jianshu.com/p/332252abe016 方法一. script: <div id="app"> <com-first& ...

  6. Luogu P4933 大师(dp)

    P4933 大师 题意 题目背景 建筑大师最近在跟着数学大师ljt12138学数学,今天他学了等差数列,ljt12138决定给他留一道练习题. 题目描述 ljt12138首先建了\(n\)个特斯拉电磁 ...

  7. P1249 最大乘积

    打暴力找规律,都是连续自然数去掉一个 n=int(input()) a=[] cnt=0 i=2 tot=0 ans=1 while tot<=n: tot+=i cnt+=1 a.append ...

  8. NOIP2017普及组初赛总结

    去年,我普及组复赛翻车,居然没进一等奖,于是,今年,我只能再做一次普及组. 这次初赛我93.5分,居然是中山市第一--(中山市太弱了?) 其实我觉得我没考好. 比赛时第二题(计算机存储数据的基本单位是 ...

  9. tinyint(1)遇到的坑

    一. Mysql查询的boolean结果将输出为0或者1. 比如: select 1=1; 其输出结果为1. 二. 使用一套中间件对kafka消息进行解析为mysql 语句,其中遇到如下的问题, 目标 ...

  10. 一条sql获取每个类别最新的一条记录

    1.初始化数据 create table Products ( id ,), name ), categroy int, addtime datetime , ) insert into Produc ...