七、多线程

7.1 线程阻塞

<script>
    // 斐波那契函数
    var fibonacci =function(n) {
        return n <2 ? n : arguments.callee(n -1) +arguments.callee(n -2);
    }; 

    fibonacci(40);
    // js 是单线程，当 js 在执行的时候，页面是停止渲染的
    // 当上面的函数在执行的时候（在大量计算），此时用户点击页面将得不到响应（假死状态）
</script>
<button>提交</button>

7.2 Worker函数

我们希望当 js 在大量计算的时候，不要阻塞线程

H5 提供了一个 Worker 函数，可以开辟一个新的线程，用于计算

使用方式：

将要计算的代码提取出来放入一个 js文件中
初始化 Worker 函数

var worker = new Worker("comouted.js");  // 会报错  需要服务器环境

7.3 证明是多线程

初始情况下，在定时器中不断的输出

当上面的延时器执行之后，下面的输出语句就会被阻塞

当点击掉弹出框的时候，定时其中的输出语句会接着上一次的结果继续输出

说明 alert阻塞了当前线程

// 开启延时器
setTimeout(function(){
    alert(1);  // alert弹出框会阻塞线程
},3000);

var i = 0;
// 开启定时器
setInterval(function(){
    console.log(i++);
}, 1000);

后来，我们将要计算的代码放入到另一个 js 文件中，并初始化 Worker函数用于开辟新的线程
当 3s 之后，弹出框出现，定时器中的输出语句虽然被阻塞了，但是仍会多出很多输出语句
说明主线程被阻塞了，但是有另外一个线程在计算

var worker = new Worker("out.js");

7.4 postMessage

开辟的额外的线程用于计算，计算的结果可以通过postMessage向主线程推送

console.log(worker);

7.5 onmessage

额外的线程向主线程推送的消息，可以通过 onmessage来获取

// out.js 向主线程推送的消息，可以通过 onmessage来获取
worker.onmessage = function(e){
    console.log(e);
}

worker.onmessage = function(e){
    // console.log(e);
    // 具体的数据在 e.data 中
    console.log(e.data);
}

举例（斐波那契函数）：

var fibonacci =function(n) {
    return n <2 ? n : arguments.callee(n -1) +arguments.callee(n -2);
}; 

var result = fibonacci(30);
// console.log(result);  // 832040
// 将结果推送到主线程
postMessage(result);

worker.onmessage = function(e){
    // console.log(e);
    // 具体的数据在 e.data 中
    console.log(e.data);        // 832040
}