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

Posted 2021-03-09 maycpou

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

 

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