浅学H5 Web Workers(多线程)(周记)

周总结：

        这周主要进行的是对JS高级的学习，刚开始看视频学一遍后感觉问题不是很大，不过这两天结合其他的进行再学习，我发现我的问题还是不小的。尤其是对闭包，多线程的学习还是过于浅薄，缺少总结；明天又要考核了，感觉不太妙呀。以后对新的知识的学习还是要结合多点渠道多进行学习，要不然很难掌握好知识点！

        下面浅记录关于JS对多线程的基本用法：

前言

        JS是单线程的去跑代码，比如如果做一个循环从0到一个很大的数字相加然后输出，浏览器可能会假死（无响应状态），这个时候利用多线程的优点去创建主线程和子线程成为了解决这个问题的好方法；

下面记录一下JS多线程的基本应用：

实例：

1.main.js （主线程）：

var number=42
var worker=new Worker('t1.js');
//创建Worker对象
worker.onmessage=function(event){
    console.log("主线程接收分线程返回的数据"+event.data);
    alert(event.data)
}   
//或进行代码的简写：
//		worker.onmessage=({data})=>{
//   	console.log("主线程接收分线程返回的数据"+data);
//    alert(data)
//}
//绑定接收信息的监听，当接收到信息后调用
worker.postMessage(number);
console.log("主线程向分线程发送数据"+number);
//向分线程发送信息

2.t1.js(分线程)：

 

function fff(n){
    return n<=2?1:fff(n-1)+fff(n-2);
}
var onmessage=function(event){
    var number=event.data;
    console.log("分线程接收到的主线程数据："+number)
    var result=fff(number)
    postMessage(result)
    console.log("分线程向主线程发送数据："+result)
}
//或进行代码的简写：
//self.onmessage=({data})=>{
//    var number=data;
//    console.log("分线程接收到的主线程数据："+number)
//    var result=fff(number)
//    postMessage(result)
//    console.log("分线程向主线程发送数据："+result)
//}
//alert("d");//报错
//因为alert是window的方法，分线程的全局对象不是window

3.控制台输出结果：

主线程向分线程发送数据：42
分线程接收到的主线程数据：42
分线程向主线程发送数据：267914296
主线程接收分线程返回的数据：267914296 

结束！