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