文档章节

JavaScript多线程使用方法

tbaby
 tbaby
发布于 2014/06/26 14:56
字数 909
阅读 95
收藏 0

Web Workers 是在HTML5中新增的,用来在web应用程序中实现后台处理的一种技术


在HTML4中,js创建的程序都是单线程的,如果花费时间比较长的话web界面就会长时间没有响应,最恶劣的情况还会跳出一个脚本提示框:


提示脚本运行时间过长,是否继续。。。。于是就引出了本文的主角:Web Workers API


使用这个API用户可以非常容易的创建在后台运行的线程,要创建后台程序很简单:

var worker = new Worker('*.js');
注意:后台线程是不能访问页面或者窗口对象的
可以通过发送消息和接受消息与后台线程传递数据:
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};


说一下求和:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function calculate() {
var num = 10000000000;
var r = 0;
for (var i = 1; i < num; i++) {
r += i;
}
alert(r);
}
calculate();
</script>
</head>
<body>
</body>
</html>



于是我无响应框弹出来了。。。但使用web worker便不会:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var worker = new Worker('c.js');
worker.onmessage = function (e) {
alert('和:' + e.data);
};
function calculate() {
var num = 1000000;
worker.postMessage(num);
}
calculate();
</script>
</head>
<body>
</body>
</html>
onmessage = function (e) {
var num = e.data;
var r = 0;
for (var i = 1; i < num; i++) {
r += i;
}
postMessage(r);
}



我有时候就在想,我没事干嘛计算那么大的数字啊。。。。。当然这是无聊的坑爹,但我想有个场景可能需要用到这个。


在前面学习file api时,有个读取本地文件的操作,若是文件过大会很慢,不知道这个可以应用上去吗?二次学习时有必要试试。


与线程进行数据交互


我们这里完成一个功能,在前台随机生成数组,然后在后台计算能被3整出就返回前台打印:


主程序 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
span
{
padding: 10px;
}
</style>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var worker = new Worker('t1.js');
worker.postMessage('');
worker.onmessage = function (e) {
var arr = e.data.split(';');
for (var i = 0, len = arr.length; i < len; i++) {
var dom = $('<span>' + arr[i] + '</span>');
$('#body').append(dom);
}
}
});
</script>
</head>
<body>
<div id='body' style=' width: 400px; word-break:break-all; word-wrap:break-word; '>
</div>
</body>
</html>


生成数组的程序 

onmessage = function (e) {
var arr = [];
for (var i = 0; i < 100; i++) {
arr.push(parseInt(Math.random() * 100));
}
var worker = new Worker('t2.js');
worker.postMessage(JSON.stringify(arr));
worker.onmessage = function (e) {
//把挑选结果发回前台
postMessage(e.data);
};
}


判断数组所有数据是否被3整除 

onmessage = function (e) {
var arr = JSON.parse(e.data);
var str = '';
for (var i = 0, len = arr.length; i < len; i++) {
if (parseInt(arr[i]) % 3 == 0) {
if (str != '') str += ';';
str += arr[i];
}
}
postMessage(str);
close();
};


程序逻辑描述:


这里用了个线程嵌套


首先执行前台程序,这里初始化了一个子线程“t1”用于将100个数组初始化


然后子线程t1又初始化了子线程t2(用于遍历数组,取出能被3整除的数字,组成字符串),t1将数组数据传给t2


t2 接收t1数据,计算后将将字符串转给t1,t1转给前台,前台执行自己的逻辑


流程结束


结语


简单来说,我这里就是声明子线程,然后发送数据给子线postMessage,然后等待结果皆可。


这里看来,结合上次的通信API Web Sockets ,可以将2个结合做一个网页聊天程序,甚至还可以将本地存储/本地数据库一些东西用到。


这个样子可能是个不错的东西。


本文转载自:http://www.jb51.net/html5/79718.html

共有 人打赏支持
tbaby

tbaby

粉丝 23
博文 32
码字总数 14718
作品 7
深圳
网页/平面设计
私信 提问
谈谈javascript中的多线程

不存在的,javascript中根本不存在多线程...... 先不要慌,没有多线程我们可以模仿多线程呀!定时器、web workder等等。 存在即合理,为啥javascript需要多线程? javascript对于现如今的web...

伯涵Style
2018/09/19
0
0
JEPLUS前台API的查看使用——JEPLUS软件快速开发平台

JEPLUS前台API的查看使用 很多朋友在使用JEPLUS平台的时候会遇到很多时候需要写JS事件,但是很多时候不清楚平台支持的JS事件的写法,所以今天这篇笔记就讲解一下如何来查看平台的前台API,以...

JEPLUS
2018/06/29
0
0
JavaScript 对引擎、运行时、调用堆栈的概述理解

JavaScript 对引擎、运行时、调用堆栈的概述理解  随着JavaScript越来越流行,越来越多的团队广泛的把JavaScript应用到前端、后台、hybrid 应用、嵌入式等等领域。 这篇文章旨在深入挖掘Jav...

开元中国2015
2018/10/25
0
0
javascript中的线程之我见

今天与一个同事争论javascripe中间的线程机制,他争论说javascript是有线程的,理由即使javascript中间的事件回调就是线程的实现,个人认为在javascript中是没有线程机制的 理由如下: 引自《...

mj4738
2013/02/11
0
0
如何将 MongoDB MapReduce 速度提升 20 倍

分析在MongoDB中正成为越来越重要的话题,因为它在越来越多的大型项目中使用。人们厌倦了使用不同的软件来做分析(包括Hadoop),它们显然需要传输大量开销的数据。 MongoDB提供了两种内置分...

oschina
2013/10/30
5.4K
8

没有更多内容

加载失败,请刷新页面

加载更多

CDH5动静态资源池配置与回滚

关于动态 静态资源池的配置以前都有提过,可以从以下几篇了解: YARN动态资源池配置案例 https://yq.aliyun.com/ziliao/346856# Hadoop YARN配置参数剖析(4)—Fair Scheduler相关参数 Hadoop...

hblt-j
6分钟前
0
0
WordPress仿站实战教程

有一个月没有写blog了,一直在学习wordpress的知识,现在能够进行简单的政府企业门户网站的仿制,wordpress的主题订制,一般是对前端要求比较高,wordpress学会了,建站还是非常的快的。下面...

临江仙卜算子
9分钟前
0
0
图像库stb_image

https://github.com/nothings/stb 目前一般主流的图像格式也就是bmp,jpg,png,tga,dds,除了DDS一般是给DX用的,虽然一堆OpenGL程序也有用的,但是我一般只用png和tga, png不用说了,带a...

robslove
35分钟前
1
0
Spring 事务提交回滚源码解析

前言 在上篇文章 Spring 事务初始化源码分析 中分析了 Spring 事务初始化的一个过程,当初始化完成后,Spring 是如何去获取事务,当目标方法异常后,又是如何进行回滚的,又或是目标方法执行...

TSMYK
54分钟前
2
0
百度黄埔学院将培养一批首席AI架构师,为“国之重器”赋能

深度学习高端人才不仅是AI发展的重要养分,也是企业转型AI巨大推动力。2019年1月19日,百度黄埔学院——深度学习架构师培养计划在百度科技园举行开学典礼,深度学习技术及应用国家工程实验室...

深度学习之桨
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部