微信小程序基础教程之worker线程的使用方法


Posted in Javascript onJuly 15, 2019

前言

我们知道js是单线程的,在有时候需要处理一些密集计算或者是高延迟的时候,总会出现不便。而且,现在的cpu都是多核的,单线程也无法充分发挥电脑的计算能力。正是基于这种情况,才有了worker的诞生。由于微信小程序官方的教程比较看不懂...所以本篇主要介绍一下worker在小程序中的用法。

worker的一些说明

本篇主要是在小程序中使用worker,因为说明部分也是和小程序相关。

1、主线程和worker线程之间是通过消息来通信的,主线程不能直接调用worker线程中的函数

2、worker线程中不能使用使用wx系列的api。

步骤说明

小程序中,worker用法主要分为3步(按我个人的划分),分别是:配置、主线程中创建调用和销毁、worker线程中实现。

步骤一:配置

在app.json中配置worker目录,如下图(具体需要自己一一对应目录)

微信小程序基础教程之worker线程的使用方法

步骤二:主线程中创建调用和销毁

这一步需要注意的就是,创建时填写的是绝对路径,其他基本没什么问题。例如以下代码,我们创建了worker线程,并向其发送了1个对象,对象中x=10和y=2。然后在接收到worker线程的消息时,打印出来。

// welcome.js
 onLoad: function (options) {

  const worker = wx.createWorker('/worker/myworker.js');
  worker.postMessage({
   x : 10,
   y : 2
  });

  worker.onMessage(function(res){
   console.log('这是主线程打印的')
   console.log(res)
  });
  
 },

worker线程中实现

worker中其实是默认注入了一个叫worker的对象,直接调用监听消息和发送消息即可。如以下代码:

// myworker.js
worker.onMessage(function(res){
 console.log('这是worker内部线程打印的')
 console.log(res)
 let sum = add(res.x,res.y);
 worker.postMessage({
  sum : sum
 })
});

function add(x,y){
 return x+y;
}

打印代码如下图:

微信小程序基础教程之worker线程的使用方法

小结

worker使用方法就是这样了,一般来说密集计算和高延迟的代码片段我们会放入其中,其他的话在主线程直接执行就好了。

好的,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
js实现简易计算器功能
Oct 18 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
使用vue-router在Vue页面之间传递数据的方法
Jul 15 #Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 #Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 #Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 #Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 #Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 #Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 #Javascript
You might like
使用php shell命令合并图片的代码
2011/06/23 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
javascript globalStorage类代码
2009/06/04 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
Vue实现购物车功能
2017/04/27 Javascript
vue组件生命周期详解
2017/11/07 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python skimage 连通性区域检测方法
2018/06/21 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python中的json总结
2018/10/11 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
python 爬取小说并下载的示例
2020/12/07 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
网络技术专业推荐信
2014/02/20 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
质量标语大全
2014/06/12 职场文书
大学生毕业评语
2014/12/31 职场文书
大国崛起观后感
2015/06/02 职场文书
python 中yaml文件用法大全
2021/07/04 Python
pandas中关于apply+lambda的应用
2022/02/28 Python