在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. 基于vue-cli的vs code设置

    vue-cli自带eslin校验,vs code采用下可以设置在保存文件时会自动纠正格式 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detec ...

  2. Python学习day25-面向对象之组合,多态和封装

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  3. CAS客户端配置

    1. 导出证书 以上操作会在当前目录产生文件:ssodemo.crt(需要用到的文件请看CAS服务端配置那篇文章) 2. 客户端导入证书 以上操作会在jdk安装目录jre\lib\security下产 ...

  4. 第一次个人项目【词频统计】——PSP表格

    PSP2.1 任务内容 计划完成需要的时间(min) 实际完成需要的时间(min) Planning 计划 45 40 Estimate 估计这个任务需要多少时间,并规划大致工作步骤 30 20 De ...

  5. webpack打包less与sass

    less 1.安装 less-loader 与 less npm install less-loader less --save-dev 2.配置webpack.config.js module.ex ...

  6. mysql高级教程(一)-----逻辑架构、查询流程、索引

    mysql逻辑架构 和其它数据库相比,MySQL有点与众不同,它的架构可以在多种不同场景中应用并发挥良好作用.主要体现在存储引擎的架构上,插件式的存储引擎架构将查询处理和其它的系统任务以及数据的存储提 ...

  7. Python字符串切片操作知识详解

    Python字符串切片操作知识详解 这篇文章主要介绍了Python中字符串切片操作 的相关资料,需要的朋友可以参考下 一:取字符串中第几个字符 print "Hello"[0] 表 ...

  8. mysql不创建表 <property name="hbm2ddl.auto">update</property> 无效

    netbeans win10 mysql8 hibernate 4.3.11 dakai mysql的general_log发现并没有创建表的语句 未完待续 今天又遇到不创建表的问题 但是问题比较奇怪 ...

  9. 2019-7-9-Roslyn-如何在-Target-引用-xaml-防止文件没有编译

    title author date CreateTime categories Roslyn 如何在 Target 引用 xaml 防止文件没有编译 lindexi 2019-07-09 17:16: ...

  10. javascript基础:事件

    事件: 概念:某些组件被执行了某些操作后,触发某些代码的执行 *  事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了 *  事件源:组件.如:按钮   文本输入框.... *  监听器:代码 * ...