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,无法更新界面

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值