理解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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
jQuery 选择器详解
Jan 19 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
Vue实现购物车功能
Apr 27 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 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
Sony CFR 320 修复改造
2020/03/14 无线电
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
基于Jquery的温度计动画效果
2010/06/18 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python subprocess模块详细解读
2018/01/29 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python调用自定义函数的实例操作
2019/06/26 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python计算二维矩形IOU实例
2020/01/18 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
为什么使用接口?
2014/08/13 面试题
.NET笔试题(20个问题)
2016/02/02 面试题
应聘教师推荐信
2013/10/31 职场文书
加工操作管理制度
2014/01/19 职场文书
感谢信怎么写
2015/01/21 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
Python极值整数的边界探讨分析
2021/09/15 Python
Python集合的基础操作
2021/11/01 Python
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS