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

时间:2021-10-31 05:06:36

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

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),并且再分线程里面也就访问不到页面的任何元素。所以分线程的定位是只进行计算的,不做任何页面相关的操作。