<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="" id="t1" value="" placeholder="请输入数字" />
<button type="button" id="b1">计算斐波那契数字</button>
<script type="text/javascript">
/**
* web workers 简介：主要提供了主线程调用分线程的API
* Worker: 构造函数，加载分线程执行的js文件
* Workers.prototype.onmessage:用来接收另一个线程的回调函数
* Workers.prototype.postMessage：向另一个线程发送消息
*
* 缺点：
* worker 内代码不能操作dom
* 不能跨域加载js
* 不是所有的浏览器都支持这种新特性(h5)
*/
document.getElementById('b1').onclick = function(){
var num = document.getElementById('t1').value;
//创建一个Worker对象
var worker = new Worker("c.js");
worker.onmessage = function(event){
console.log("主线程接收分线程返回的数据："+event.data)
}
worker.postMessage(num);
console.log("主线程向分线程发送的数据："+num)
}
</script>
</body>
</html>
c.js
function fun(n){
if(n<=2) {
return 1;
}else {
return fun(n-1) + fun(n-2)
}
}
this.onmessage = function(event){
var num = event.data;
console.log("分线程接收主线程的数据："+event.data)
var result = fun(num);
postMessage(result)
console.log("分线程向主线程返回的数据是："+result)
}