JS利用HTML5的Web Worker实现多线程

Posted maycpou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS利用HTML5的Web Worker实现多线程相关的知识,希望对你有一定的参考价值。

需求:有一个长时间的斐波拉契的计算希望放在分线程中计算,计算的得到结果后再返回给主线程展示,再计算的时候不冻结页面

 

var number = 55;//传入分线程的参数

var worker = new Worker(‘worker.js‘);//利用一个js文件创建一个分线程

worker.postMessage(number);//向分线程传入数据

woker.onmessage=function(event){//设置分线程的回调函数,并接收返回的结果

  console.log(‘接收到分线线程返回的数据:‘+event.data);

}

 

下面是worker.js文件中的代码:

var onmessage = function(event){//接收主线程传入的数据并进行计算

  var number = event.data;

  var result = fibonacci(number);

  postMessage(result );//返回主线程并传入返回结果

}

 

function fibonacci(n){//斐波拉契计算函数

  return n<=2?1:fibonacci(n-1)+fibonacci(n-2);

}

 

注:当worker.js文件作为分线程调用的时候,worker.js文件中的this就不是指向window了,所有再分线程上面是不能使用window自带的很多函数的(比如alert),并且再分线程里面也就访问不到页面的任何元素。所以分线程的定位是只进行计算的,不做任何页面相关的操作。

 

以上是关于JS利用HTML5的Web Worker实现多线程的主要内容,如果未能解决你的问题,请参考以下文章

HTML5多线程JavaScript解决方案Web Worker——专用Worker和共享Worker

HTML5多线程JavaScript解决方案Web Worker——专用Worker和共享Worker

HTML5( Web Worker ) & 微信小程序多线程

Web Worker——js的多线程,实现统计博客园总阅读量

HTML5(四)——Web Workers

web worker 使用及在 electron 中使用web worker