参考地址:https://www.cnblogs.com/yuzhongwusan/archive/2011/12/22/2297797.html
参考地址:https://www.cnblogs.com/peakleo/p/6218823.html
使用方法:
calculate.html
<!DOCTYPE HTML>
<html lang="en"><head>
<meta charset="UTF-8">
<title>webworkers--calculate</title>
</head>
<body>
<input id="num" name="num" type="text"/>
<button onclick = "calculate()">计算</button><br />
<div id="result" style="color:red;"></div>
<div id="time" style="color:red;"></div>
<script type="text/javascript" src="calculate.js"></script>
<script type="text/javascript">
var worker = new Worker("calculate.js");
var data1 =0;
var data2 =0;
worker.onmessage = function(event){
var data = event.data;
data2 = new Date().getTime();
document.getElementById("result").innerHTML ="计算结果:"+data;
document.getElementById("time").innerHTML ="workers 耗时:"+ (data2 - data1)+"ms";
};
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById("num").value;
var val = parseInt(num,10);
worker.postMessage(val); //注意:启动worker,必须有!同时可以传递数据到js
}
</script>
</body>
</html>
calculate.js
onmessage = function(event){
var num = event.data; //接收html传递的数据
var result = 0;
for(var i = 0; i<num;i++){
result += i;
}
postMessage(result); //返回计算后的数据
};