文档章节

JavaScript多线程使用方法

tbaby
 tbaby
发布于 2014/06/26 14:56
字数 909
阅读 92
收藏 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
深圳
网页/平面设计
JEPLUS前台API的查看使用——JEPLUS软件快速开发平台

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

JEPLUS
06/29
0
0
javascript中的线程之我见

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

mj4738
2013/02/11
0
0
理解JavaScript中的Event Loop

Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制。 JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题。 本文参考C. Aaron Cois的《Understanding The Node.js...

董广明
2014/03/24
0
0
什么是 Event Loop?

Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制。 JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题。 本文参考C. Aaron Cois的《Understanding The Node.js...

H_J
2014/01/01
0
0
Javascript是单线程的深入分析

面试的时候发现99%的童鞋不理解为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?还有non-blocking IO, event loop等概念很不清楚。来深入分析...

stone_
2014/04/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

马太效应

马太效应

yizhichao
14分钟前
0
0
69.for while循环 continue break exit

20.10 for循环 20.11/20.12 while循环 20.13 break跳出循环 20.14 continue结束本次循环 20.15 exit退出整个脚本 扩展 select用法 http://www.apelearn.com/bbs/thread-7950-1-1.html 20.10......

王鑫linux
22分钟前
0
0
完整的软件开发流程是怎样的

在it圈混迹了这么久,做过各种各样的工作。但是我确一直不知道一个软件从无到有到底是怎么开发的。于是就产生了强烈的好奇心:一个软件产品的结果为什么是这样?为什么开发的速度不能再快一点...

TreasureWe
28分钟前
0
0
深度学习与图像处理之:人像背景虚化

简单实现思路: 对图像内容进行分割,提取人像 对图像背景进行模糊化处理 将人像和背景重新合成 在这里,使用DeepLabV3模型对图像内容进行分割并提取人像,实现的代码如下: import numpy a...

IOTService
31分钟前
0
0
20180918上课截图

小丑鱼00
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部