理解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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
详解javascript函数写法大全
Mar 25 Javascript
js实现时分秒倒计时
Dec 03 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
针对初学者的jQuery入门指南
2015/08/15 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
js实现右键菜单功能
2016/11/28 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
python画环形图的方法
2020/03/25 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
学生实习自我鉴定
2013/10/11 职场文书
毕业生文员求职信
2013/11/03 职场文书
教师队伍管理制度
2014/01/14 职场文书
安全生产投入制度
2014/01/29 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
病危通知单
2015/04/17 职场文书
管理失职检讨书
2015/05/05 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
Ruby处理CSV数据方法详解
2022/04/18 Ruby
netty 实现tomcat的示例代码
2022/06/05 Servers