什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
/*--------------worker.js---------------*/
//计算斐波那契
function fibonacci(num){
if(!num) return 0;
return num==1?1:fibonacci(num-1)+fibonacci(num-2);
}
var onmessage=function(e){
var number=e.data;
console.log('分线程接收到主线程数据:'+number);
//计算结果
var res=fibonacci(number);
//返回数据
postMessage(res);
console.log('分线程返回数据到主线程:'+res);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>workers多线程</title>
</head>
<body>
<input type="number" id="input">
<button id="btn">计算斐波那契项</button>
<script>
var input=document.getElementById('input');
var btn=document.getElementById('btn');
//绑定点击事件
btn.οnclick=function(){
var number=input.value;
//创建Worker对象
var worker=new Worker('worker.js');
//向分线程发数据
worker.postMessage(number);
console.log('向分线程发数据:'+number);
//绑定监听函数
worker.onmessage=function(e){
console.log('主线程接收分线程返回数据:'+event.data);
console.log(e);
}
}
</script>
</body>
</html>