理解JavaScript中worker事件api


Posted in Javascript onDecember 25, 2015

如果你不是很了解Event事件,建议先这篇文章《理解javascript中DOM事件》

首先,我们需要实例一个Worker的对象,浏览器会根据新创建的worker对象新开一个接口,此接口会处理客户端与indexedDB数据库之间的通信。这里的数据库是指浏览器数据库。如果,你需要判断浏览器是否支持worker对象,详见如下代码。或者浏览器是否支持indexedDB数据库,详见同下,二者判断最好选择前者。因为IE不支持indexedDB 。

if(window.Worker){ dosomething }
// Worker
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; 
if(!window.indexedDB){ dosomething }
// indexedDB

之后,worker对象会通过postMessage线程向indexedDB数据库发送数据,当indexedDB数据库接收到客户端发送的数据,首先把数据的键值储存并记录到indexedDB数据库表里面,其实相当于把数据保存在一张结构完整的表内。

于是,indexedDB数据库会把接收到的数据值扔给新接口处理,当新接口获得数据并解析之后,会通过postMessage扔回一条数据给数据库,数据库接收返回的数据处理的方式和上面一样,此时indexedDB数据库会把返回的数据扔给客户端接受参数的onmessage线程,主线程后面onmessage线程主要是接收传回的数据。

var txt1 = document.querySelector("#txt1");
var txt2 = document.querySelector("#txt2");

var result = document.querySelector("#result");
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 if(!window.indexedDB)
 {
  console.log("你的浏览器不支持IndexedDB");
 }
 if(window.Worker){
  var _this = new Worker("../../js/build/scroll_ten1.js");
  txt1.onchange = function(){ 
   _this.postMessage([txt1.value,txt2.value]); // e = [txt1.value,txt2.value]
   console.log("message post to work");
  }
  txt2.onchange = function(){
   _this.postMessage([txt1.value,txt2.value]); // e = [txt1.value,txt2.value]
   console.log("message post to work");
  }
  _this.onmessage = function(s){ //接收到的数据 e
   result.textContent = s.data;
  }
 }
onmessage = function(e){ //e接收Worker.postmessage传的参数
 var s = (e.data[2]*e.data[1]);
 var workerResult = "result : " + s;
 postMessage(workerResult); //Worker.onmessage进行回调workerResult参数
}

想必大家看了以上的分析之后,肯定在想用Worker能做什么?对于这个问题,目前能解决线程的非阻塞问题,如何说起,当用户改变browser的的尺寸、以及拖动浏览器时,主线程访问后台数据时,并不会中断数据之间的进程。

支持Worker的browser有哪些?

理解JavaScript中worker事件api

分享一个链接caniuse,通过这个工具你能更加全面的看到各个浏览器的(hack)。

// *注Worker的首字母必须是大写的

// *注Worker的脚本目录必须是HTML能够访问到的目录

以上就是本文的全部内容,希望对大家深入理解JavaScript中worker事件api有所帮助。

Javascript 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
vue实现下拉菜单树
Oct 22 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
基于jquery实现省市区三级联动效果
Dec 25 #Javascript
js实现文本框输入文字个数限制代码
Dec 25 #Javascript
js实现简单的验证码
Dec 25 #Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 #Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 #Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 #Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 #Javascript
You might like
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
Python实现检测文件MD5值的方法示例
2018/04/11 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
QML用PathView实现轮播图
2020/06/03 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
法律六进活动方案
2014/03/13 职场文书
房产协议书范本
2014/10/18 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
篮球赛新闻稿
2015/07/17 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android