在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. 为什么Java中的String是设计成不可变的?(Why String is immutable in java)

    There are many reasons due to the string class has been made immutable in Java. These reasons in vie ...

  2. System.Web.Mvc.FileResultc.sc

    ylbtech-System.Web.Mvc.FileResultc.sc 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Public ...

  3. NAT后的FTP服务器部署笔记

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2017年2月5日) 寒假开始以后,过年之前有一个任务,为实验室的人搭建一个FTP,用之前部署好的物理服务器.这本就是网管干 ...

  4. Spring框架使用ByName自动注入同名问题剖析

    问题描述   我们在使用spring框架进行项目开发的时候,为了配置Bean的方便经常会使用到Spring当中的Autosire机制,Autowire根据注入规则的不同又可以分为==ByName==和 ...

  5. linux最基础最常用的命令快速手记 — 让手指跟上思考的速度(三)

    这一篇作为姐妹篇的第三篇,废话不多说,我觉得这个比mysql的还要重要,为什么,一旦你摊上linux 敲键盘输入命令简直是要飞的速度,不断的卡壳查命令,效率太低了,而且非常严重的影响思绪,思绪! 某些 ...

  6. Lab 2 内存管理

    常见的操作系统 只使用了 0 和3 段选择子 DPL 是段描述符的内容 段的信息 中断和陷入的 大致特权级的展现 RPL 当前要访问数据段对饮给的特权级 CPL 当前代码段的特权级 DPL 全局的 通 ...

  7. springboot 2+ druid

    springboot 1+ druid druid 配置 import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid ...

  8. 2018-8-10-win10-uwp-手把手教你使用-asp-dotnet-core-做-cs-程序

    title author date CreateTime categories win10 uwp 手把手教你使用 asp dotnet core 做 cs 程序 lindexi 2018-08-10 ...

  9. linux-c getopt()参数处理函数

    转自:https://www.cnblogs.com/qingergege/p/5914218.html 最近在弄Linux C编程,本科的时候没好好学啊,希望学弟学妹们引以为鉴. 好了,虽然啰嗦了点 ...

  10. 如何使用Junit进行单元测试

    测试方法的要求: 必须是public 无返回值 无参数 @Testpublic void f1(){ .....} 在@Test上按下 Ctrl+1(快速锁定错误) 引入Junit包 在方法名上右键 ...