HTML5 worker 多线程_worker document.write(-优快云博客

本文链接：https://blog.youkuaiyun.com/ufodsyfaa/article/details/9269655

测试阅读器： FF 3.6
   测试效劳器： APACHE 2.2

   先让我们去梦想下假如WEB页里上能用多线程，那是否是意味那WEB页里逐步代替了客户端？
   html5 标准

   好了切进正题，那末WEB的多线程究竟是个虾米？

   从字里上去看，我们该当看的出他的完成是WORKER形式吧，甚么是WORKER形式？
   写过量线程的同窗该当比我更分明，年夜体的概念是：线程的创立由一个WORKER去决议，维护了一个线程池。

   接着，我们看下HTML5的多线扯菪甚么特性的：

   1. 正在线程中是不克不及操做DOM节面的（念要操做的话只能发送动静给worker创立者回调函数）
   2. 多线程的素质实际上是真实的体系线程
   3. 能利用setTimeout(), clearTimeout(), setInterval(),clearInterval()等函数
   4. 能停止IO操做（ajax）

   worker大抵的流程是如许子的：
   创立一个worker对象，绑定一个领受后台处理动静的办法 onmessage 战一个错误处理办法 onerror 。利用postMessage去通报数据，那个办法的参数是严厉的JSON对象。当后台处理完利用postMessage办法将数据传回前台，也便是onmessage的办法。

   接下去看例子：

   那个例子是页里通报一个数让后台减3，然后正在页里隐示

   挪用者：

[color=amily:Consolas,'Courier]

[JAVAscript] view plaincopy

< !DOCTYPE html>
< html>
<head><title>worker Test</title>
<meta http-equiv="pragma" content="no-cache"></meta>
<meta http-equiv="expires" content="-1"></meta>
<meta http-equiv="cache-control" content="no-cache"></meta>
</head>
<body>
      <div id="result" >zz</div>
</body>
<mce:script type="text/javascript"></mce:script>
< /html>



   上里的代码创立了一个worker对象，然后初初化onmessage 战 onerror的办法，最初传进一个整数1

   接着我们去看下worker.js的内容

[color=amily:Consolas,'Courier]

[javascript] view plaincopy

onmessage = function(event) {
var data = event.data+3;
postMessage(data);
};



   因为work.js实邻Worker上下伪甭的，以是能间接利用 postMessage.
   一旦利用了那个办法，那末它以下的代码将没有执止，假如念要完成轮回的话，建议利用setInterval
   并且Worker出有锁的机造，多线程的同步问题只能靠代码去处理（好比界说旌旗灯号变量）


   那里借值得一提的是 worker挚ボ再有子worker 好比以下代码：


[color=amily:Consolas,'Courier]

[javascript] view plaincopy

var symbol = false;
var obj ;
var i = 0 ;
onmessage = function(event) {
      obj = event.data;
      callWorker();
};
setInterval(function(){
      if(i == 10) {
            postMessage(obj);
      }
},100);
callWorker = function(){
      var worker = new Worker("sub.js");
      worker.onmessage = function(event){
            obj.a = event.data;
            i = 10;
      };
      worker.onerror = function(event){
            throw e;
      };
      worker.postMessage(1);
};



   sub.js

[color=amily:Consolas,'Courier]

[javascript] view plaincopy

onmessage = function(event){
      postMessage(7);
};


  转载注明： http://www.shengshiyouxi.com
    沙脉例子正在女的worker中挪用子worker：利用setInterval的办法等候i的值由子线程改动为10，然后返回迪瞥里

   那里借值得留意的办法有两个close 战 terminate
   close 是worker本人销誉本人
   terminate是worker创立者销誉worker