方法一:递归实现斐波那契数列:
<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
// 1 1 2 3 5 8 f(n) = f(n-1) + f(n-2)
function fibonacci(n) {
return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2) //递归调用
}
// console.log(fibonacci(7))
var input = document.getElementById('number')
document.getElementById('btn').onclick = function () {
var number = input.value
var result = fibonacci(number)
alert(result)
}
问题:在计算斐波那契数列数控制界面不能进行操作
解决:H5规范提供了js分线程的实现, 取名为: Web Workers,使用分线程计算斐波那契
方法二:使用分线程实现斐波那契数列
<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
var input = document.getElementById('number')
document.getElementById('btn').onclick = function () {
var number = input.value
//创建一个Worker对象
var worker = new Worker('worker.js')
// 绑定接收消息的监听 线程中的数据存在data属性中
worker.onmessage = function (event) {
console.log('主线程接收分线程返回的数据: '+event.data)
alert(event.data)
}
// 向分线程发送消息
worker.postMessage(number)
console.log('主线程向分线程发送数据: '+number)
}
// console.log(this) // window
创建分线程worker.js文件
//计算的方法
function fibonacci(n) {
return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2) //递归调用
}
console.log(this)
this.onmessage = function (event) {
var number = event.data
console.log('分线程接收到主线程发送的数据: '+number)
//计算
var result = fibonacci(number)
postMessage(result)
console.log('分线程向主线程返回数据: '+result)
// alert(result) alert是window的方法, 在分线程不能调用
// 分线程中的全局对象不再是window, 所以在分线程中不可能更新界面
}
分线程中的全局对象不再是window,(而是下图中的DedicatedWorkerGlobalScope) 所以在分线程中不可能更新界面,即不能操作dom。
相关API
- Worker: 构造函数, 加载分线程执行的js文件
- Worker.prototype.onmessage: 用于接收另一个线程的回调函数
- Worker.prototype.postMessage: 向另一个线程发送消息
不足
- worker内代码不能操作DOM(更新UI) 分线程中全局对象不是window了所以不能操作dom
- 不能跨域加载JS
- 不是每个浏览器都支持这个新特性