原文地址：https://www.cnblogs.com/haodawang/articles/5850822.html

在讲之前，大家都知道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实现多线程的更多相关文章

  1. JavaScript 进阶（一）JS的"多线程"

    这个系列的文章名为“JavaScript 进阶”,内容涉及JS中容易忽略但是很有用的,偏JS底层的,以及复杂项目中的JS的实践.主要来源于我几年的开发过程中遇到的问题.小弟第一次写博客,写的不好的地方 ...

  2. web Worker使js实现‘多线程’？

    大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...

  3. JS的多线程

    注:以下内容基于IE中GIF的onload事件的基础上,故所有测试IE only 需要用到的几个图片 先看一个简单的事实: 复制代码代码如下: <SCRIPT LANGUAGE="Ja ...

  4. javascript(js)小数精度丢失的解决方案

    原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3* ...

  5. 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数

    来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...

  6. paip.java 以及JavaScript (js) 的关系以及区别

    paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

  7. 关于URL编码/javascript/js url 编码/url的三个js编码函数

    关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),encodeURI(),encodeURIComponent() 本文为您讲述关于js(javasc ...

  8. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  9. JavaScript(js)/上

    JavaScript(js) ECMA-----定义的基础语法 DOM------document  object  model BOM------Browser  object  model Jav ...

  10. 【HANA系列】SAP HANA XS使用JavaScript(JS)调用存储过程(Procedures)

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

随机推荐

  1. libjson 编译和使用 - 1. 编译

    以下转自:http://blog.csdn.net/laogong5i0/article/details/8212511 最近想用box2dEdit来编辑一下比较复杂的图形然后倒入到自己有游戏里,但b ...

  2. DELPHI中千万别直接使用CreateThread ,建议使用BeginThread（在C++中无大问题，可是到了DELPHI中情况就不一样了）

    以前在写个别程序的时候老是喜欢使用纯API编程. 在C++中无大问题,可是到了DELPHI中情况就不一样了. 当你用 DELPHI写的多线程程序莫名其妙的内存错误,特别是字符串(string)操作;  ...

  3. convert-a-number-to-hexadecimal

    https://leetcode.com/problems/convert-a-number-to-hexadecimal/ // https://discuss.leetcode.com/topic ...

  4. 开发winform程序，在拖拽控件大小时，VS会卡死

    你可以看看你最近有没有装什么新的软件,比如说:有道词典就会与VS有冲突,导致卡死,可以把进程关闭.

  5. 【转】Arp的攻防实战

    坦白讲,我是个小白,也就是各大黑客和安全厂商所说的目标群体,前者是攻击我,后者有可能保护我.但是无论如何,这次后者应该也很无能为力了——我遭遇到了传说中的Arp攻击. 在连续一周的时间里,我发现我无法 ...

  6. Linux服务器权限管理之sudo高级应用

    Sudo是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具,减少了root用户的登陆和管理时间,提高了安全性,Sudo不是对shell的一个代替,它是面向每个命令的. Linux系统的 ...

  7. Netdata Linux下性能实时监测工具

    导读 本文将介绍一款非常好用的工具——Netdata,这是一款Linux性能实时监测工具,为一款开源工具,我对其英文文档进行了翻译,水平有限,有翻译错误的地方欢迎大家指出,希望本文对大家有所帮助,谢谢 ...

  8. Cognos两种建模工具对于复杂日期维度的处理比较（上）

    众所周知,在数据仓库中,日期维度是相当重要的.对数据分析的过程中可以从不同的角度去分析,比如按照下面的日期层次去分析数据. 年-季度-月-日 年-月-日 年-周-日 本示例将利用简单的商品销售分析的d ...

  9. java代码在开始事务后，先做了一个查询，再insert，此时会报： java.sql.SQLException: could not retrieve transation read-only status server

    解决过程: 查看mysql的事物隔离级别 SHOW VARIABLES LIKE '%iso%'; 返回结果: REPEATABLE-READ 把这个改成:READ-COMMITTED 就好了: SE ...

  10. Eclipse开发Android的配置（包括ADT安装，SDK配置）

      1. 下载Android SDK http://code.google.com/android/download.html下载后直接解压就可以使用了. 为了在DOS控制台中直接使用SDK的工具,可 ...