子线程开辟

一.个人理解

对于javaScript来说,使用单线程,严重影响效率,而**Web Workers 可以创造一个子线程与主线程并行运行**。将主线程中费时的任务放入子线程中处理,是的主线运行不被阻塞。
但Woreker使用完毕时,应注意及时关闭。

二.基本用法

1.使用Worker()构造函数里 实例化对象

var myworker = new Worker('js/worker.js', { name : 'myWorker' });//(脚本网址,可选-指定Worker名称,用来区分)

2.消息传递
a. x.postMessage(message, targetOrigin, [transfer])
data : 从其他 window 中传递过来的对象。
origin : 调用 postMessage 时消息发送方窗口的 origin
source :对发送消息的窗口对象的引用
b.x.addEventListener(event, function, useCapture)
event(必须):字符串,指定事件名。
unction(必须):指定要事件触发时执行的函数。
useCapture(可选):布尔值,指定事件是否在捕获或冒泡阶段执行。(true-事件在捕获阶段执行。false默认,在冒泡阶段执行)

使用时,主线程写法:

myworker.postMessage()//传递的目标子线程
myworker.addEventListener()

子线程写法:

self.postMessage()//表示自身线程
self.addEventListener()

3.基础代码
主线程

var myworker = new Worker('js/worker.js', { name : 'myWorker' });
			myworker.postMessage('Hello World');
			myworker.postMessage({method: 'echo', args: ['Work']});
			myworker.postMessage('冰冻黑熊');
			// 接收来自myworker线程的消息
			myworker.onmessage = function (event) {
			  console.log(event.data);
			}

Worker线程

self.addEventListener('message',function(e){
	var data = e.data;
	// console.log(data)
	switch(typeof(data)){
		case 'string':
			self.postMessage("字符串:"+data);
			break;
		case 'object':
			self.postMessage("数组:"+data);
			break;
	}
},false)

在这里插入图片描述

self.addEventListener('message',function(e){
	var data = e.data;
	// console.log(data)
	switch(typeof(data)){
		case 'string':
			self.postMessage("字符串:"+data);
			break;
		case 'object':
			self.postMessage("数组:"+data);
			// 自我关闭
			self.close()
			break;
	}
},false)

在这里插入图片描述
区别原因在于 self.close(),使用时,则会关闭本身线程。

4.线程中常见的api
主线程:
a.myworker.postMessage:主线程向目标子线程发送消息。
b.myworker.terminate:主线程关闭目标子线程
c.worker.onmessage: 指定worker线程发消息时的回调与worker.addEventListener(‘message’)类似,有关差别可自行去查
d.worker.onerror: 指定worker线程发生错误时的回调,也可以 worker.addEventListener(‘error’)同上
子线程:
a.self.postMessage:主线程向目标子线程发送消息。
b.self.terminate:主线程关闭目标子线程
c.self.onmessage: 指定worker线程发消息时的回调与worker.addEventListener(‘message’)类似,有关差别可自行去查
d.self.onerror: 指定worker线程发生错误时的回调,也可以 worker.addEventListener(‘error’)同上

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值