javascript-js实现多线程
在讲之前,大家都知道js是基于单线程的,而这个线程就是浏览器的js引擎。
首先来看一下大家用的浏览器都具有那些线程吧。
假如我们要执行一些耗时的操作,比如加载一张很大的图片,我们可能需要一个进度条来让用户进行等待,在等待的过程中,整个js线程会被阻塞,后面的代码不能正常运行,这可能大大的降低用户体验,这时候我们就期望拥有一个工作线程来处理这些耗时的操作。在传统的html时代是基本不可能实现的,而现在,我们拥有一种叫做worker的东西。它是js里的一个类,而我们只需要创建它的实例就可以使用它。
var worker = new Worker(js file path);
构造函数的参数填上你的js文件的路径,这个js文件将会在浏览器新开的线程里运行,而与原先的js引擎的线程并不影响。
下面看个例子。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><input type="text" name="ipt" id="ipt" value="" /><button id="start">start</button><button id="stop">stop</button><button id="ale">alert</button><script type="text/javascript">var ipt = document.getElementById("ipt");var stop = document.getElementById("stop");var start = document.getElementById("start");var ale = document.getElementById("ale");var worker = new Worker("js/test22.js");worker.onmessage = function(){ipt.value = event.data;};stop.addEventListener("click",function(){//用于关闭worker线程worker.terminate();});start.addEventListener("click",function(){//开起worker线程worker = new Worker("js/test22.js");});ale.addEventListener("click",function(){alert("i'm a dialog");});</script></body>
</html>
下面是test22.js里的代码,也就是存在于worker线程里的代码
var i = 0;
function mainFunc(){i++;//把i发送到浏览器的js引擎线程里postMessage(i);
}
var id = setInterval(mainFunc,1000);
运行起来我们会发现
点击确定后,它的数值并非2,而是一个比2更大的数
虽然dialog的弹出会阻塞js引擎线程,但是并不影响worker线程的运行,所以,在我们点击确定后,只是在js引擎线程上更新了新的内容,而数值是一直在跑动的,这就说明worker线程和原本的js线程互不影响.
那么既然互不影响,两个线程之间要怎么来联系呢,答案其实已经在代码里了,那就是onPostMessage 和 onmessage这两个函数,其中onPostMessage(data)的参数是你要传递的数据,而onmessage是一个回调函数,只有在接受到数据时,onmessage会被回调,onmessage有一个隐藏的参数,那就是event,我们可以用event.data获取到传递过来的数据来更新主线程。
使用worker线程应注意的是,所有js里集成的对象都在js线程里,而并非worker线程。
例如我们在worker线程里写上:
var a = document.getElementById("a");
结果你会得到一条Error,告诉你找不到document,或者document is undefined。所以我们尽量把需要的东西都写到主线程里,而只把耗时的操作写到worker线程里。
javascript-js实现多线程相关推荐
- JS实现多线程--Concurrent.Thread.js
JS实现多线程--Concurrent.Thread.js 前言 Concurrent.Thread.js 前言 js是单线程语言,但前端的某些任务是非常耗时的,如果让它们老老实实的排队等待执行的话, ...
- 谈谈javascript中的多线程
不存在的,javascript中根本不存在多线程...... 先不要慌,没有多线程我们可以模仿多线程呀!定时器.web workder等等. 存在即合理,为啥javascript需要多线程? java ...
- JavaScript如何实现多线程?
今天看到一道面试题,问js如何实现多线程?下面来总结一下: 因为 JS是一种单线程语言,即使是一些异步的事件也是在JS的主线程上运行的.像setTimeout.ajax的异步请求,或者是dom元素的一 ...
- JavaScript(js)/上
JavaScript(js) ECMA-----定义的基础语法 DOM------document object model BOM------Browser object model Jav ...
- ie6 javascript js 缺少标识符总结(转载)
转载http://blog.csdn.net/qingyundys/article/details/6218280 ie6 javascript js 缺少标识符总结 1. ie6下,javascri ...
- asp.net 用户注册怎么判断用户名是否重复 ajax,AJAX_asp.net结合Ajax验证用户名是否存在的代码,1, 使用JavaScript js文件,验证 - phpStudy...
asp.net结合Ajax验证用户名是否存在的代码 1, 使用JavaScript js文件,验证用户名是否存在 复制代码 代码如下: var ajax = function(option) { va ...
- JavaScript JS 如何定义多行文本
JavaScript JS 如何定义多行文本 JavaScript JS 定义多行文本最优雅的方式 var lines = function () { 你的文本内容开始 asd ccac文本结束}; ...
- JavaScript(JS) date.getDay()
Date对象是JavaScript语言内建的数据类型.使用新的Date()创建日期对象.本文主要介绍JavaScript(JS) date.getDay() 方法. 原文地址:JavaScript(J ...
- JavaScript js如何代码加密绑定域名
(function(){for(var c=location.host,a="",b=0;b<c.length;b++)a+=c[b].charCodeAt(0);if(&q ...
- java web之javascript(js)解析
java web javascript(js): javascript(js): js嵌入在html中,在浏览器中运行的脚本语言 js跟java没有任何关系,只是语法相似 是一 ...
最新文章
- 88. Leetcode 剑指 Offer 14- I. 剪绳子 (动态规划-基础题)
- sybase 事务插入时不可查询_InnoDB事务与锁
- 退出所有循环_Python学习之路9—循环的总结
- UserDetailsService详解
- 【英语学习】【English L06】U03 House L1 What type of apartment do you want to rent?
- Vue----常见面试题
- 你觉得iPhone吸引你的是什么?
- 零基础学python用哪本书好-零基础学python推荐几本python学习的书籍
- 超详细域名和二级域名、子域名免费配置SSL证书变成升级HTTPS(完整配置文件)
- 骂人不带脏字的80后
- Phonetic symbol 单元音 - 长元音 -- ɜː (新) / ə: (旧) 与 ɔː
- 腾讯优图TFace正式开源,更可信的人脸识别!
- Transformer对接公司需求的调研报告
- 倍加福 vmt视觉识别软件应用
- Spring JMS CLIENT_ACKNOWLEDGE
- 手机锂电池规格及充电曲线
- CMS使用freemarker实现页面静态化
- Centos7扩容根目录
- joinquant量化是什么?是主流的量化平台吗?
- FPGA视频接口方案,VGA,HDMI,LVDS,SDI接口转换