H5多线程Worker

H5新增 多线程Worker的简单使用

Web Worker 是H5提供的一种JS多线程解决方案， 我们可以将一些大量计算的代码交给Web Worker运行而不阻塞主线程，但是子线程完全受主线程控制，且无法操纵DOM，所以还是无法改变JS是单线程的质

• 以JavaScript来实现著名的斐波拉且数列，当我在输入框中输入第一个数字时返回这个数字所在位置的数字值。

html代码：

<input type="text" id="num">
<button id="btn">计算</button>

主线程js代码：

 var input = document.getElementById('num')
    document.getElementById('btn').onclick = function () {
        var number = input.value

        //创建一个worker对象
        var worker = new Worker('worker.js')
        //绑定接受消息的监听
        worker.onmessage = function (e) {
            console.log('主线程接受分线程返回的数据：'+event.data)
            alert(e.data)
        }

        //向分线程worker.js发送消息
        worker.postMessage(number)
        console.log('主线程向分线程发送数据：'+number)
    }

分线程 worker.js:

function fibonacci(n) {
    return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)
}

var onmessage = function (e) {
    var number = e.data
    console.log('分线程接收到了主线程发送的数据：'+number)
    //计算
    var result = fibonacci(number)
    postMessage(result)
    console.log('分线程向主线程返回数据：'+result)
    //alert(result)  alert是window中的方法，在分线程中无法调用
}

注意：分线程中的全局对象不在是window，无法更新界面