文档章节

JavaScript多线程使用方法

tbaby
 tbaby
发布于 2014/06/26 14:56
字数 909
阅读 93
收藏 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
09/19
0
0
JavaScript 对引擎、运行时、调用堆栈的概述理解

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

开元中国2015
10/25
0
0
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
什么是 Event Loop?

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

H_J
2014/01/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue- 对象语法 v-bind:class与对象语法的使用

我们可以传给 v-bind:class 一个对象,以动态地切换 class 。 <div v-bind:class="{ active: isActive }"></div>//对象语法也就是在v-bind:class绑定一个对象的时候,里面的值将影响最终取值...

文文1
27分钟前
1
0
epoll中使用

1、一个线程epoll_wait时,另一个线程调用epoll_ctl是安全的。 2、使用edge触发,在socket有数据到来后,不收取数据,再次调用epoll_ctl将socket加入,仍会触发下一次动作。 asio用该方法来发...

gelare
55分钟前
1
0
PHP规范PSR2

PSR标准 - PSR-2 为了尽可能的提升阅读其他人代码时的效率,下面例举了一系列的通用规则,特别是有关于PHP代码风格的。 各个成员项目间的共性组成了这组代码规范。当开发者们在多个项目中合作...

geek土拨鼠
今天
5
0
【极简】如何在服务器上安装SSL证书?

本文适合任何人了解,图形化操作。下面以腾讯云为例,并且服务器(linux)也安装了宝塔面板。 1.登陆腾讯云账号进入控制台,找到SSL的产品 2.按要求申请并填写表单,记住私钥密码 3.提交后,待...

皇冠小丑
今天
1
0
深入理解编译器

深入理解编译器 原文出处 欢迎向Rust中文社区投稿,投稿地址,好文将在以下地方直接展示 1 Rust中文社区首页 2 Rust中文社区Rust文章栏目 3 知乎专栏Rust语言 编程语言是如何工作的 从内部理解...

krircc
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部