There is no doubt that JavaScript是没有多线程之说的,他只能一件事一件事的做,做完一件事再做下一件事,假如你的js要花一段比较长的时间做一件事的话,那么浏览器将会卡顿一段时间,不对用户的操作产生响应,这可咋办呢?谢天谢地,HTML5为我们提供了实现多线程的机制,这么好的东西,想必你早就再用了,不过没关系啊,咱们一块儿复习一下咯!

一、Worker类

  1、方法介绍

  (1)构造函数 new Worker(arg)  :参数表示你的线程要执行的代码所在的js文件,例如‘myworker.js’,构造函数当然是返回一个Worker类的实例

  (2)worker.postMessage(message):这个方法表示从主线程向子线程发送消息或者子线程向主线程发送消息,message一般是一个字符串,也可以将一个js对象转成字符串发过去

  (3)worker上还有一个message事件,当有人向这个worker实例发送消息时,该事件被触发,我们可以从他的事件对象的data属性中获得post过来的值

  可以看到Woker类的API是相当简洁的,只有两个最常用的方法,一个事件,下面我们来通过实际的例子看看。

  

电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训

//main.html<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>main</title></head><body>
    <div id="out"></div>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">
        var out = document.getElementById("out");        var btn = document.getElementById("btn");        var txt =&nb
        
		

网友评论