微信小程序基础教程之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 相关文章推荐
lib.utf.js
Aug 21 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
使用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实现mysql数据库备份类
2008/03/20 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python中functools模块函数解析
2017/03/12 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
网上书店创业计划书
2014/01/12 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
2014年营销工作总结
2014/11/22 职场文书
申报材料格式
2014/12/30 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Python制作一个随机抽奖小工具的实现
2021/07/07 Python