<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<script src="js/prime.js"></script>
<button>按钮2</button>
</body>
</html>
function isPrime(num){
var start=new Date().getTime();
do{
var end=new Date().getTime();
}while(end-start<3000);
for(var i=2;i<num;i++){
if(num%i==0){
break;
}
}
if(i==num){
return true;
}
else{
return false;
}
}
isPrime(10000);
上面代码可以看到3秒多的延时,按钮2后面才显示出来。
--------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<script>
new Worker("js/prime.js");
</script>
<button>按钮2</button>
</body>
</html>
function isPrime(num){
var start=new Date().getTime();
do{
var end=new Date().getTime();
}while(end-start<3000);
for(var i=2;i<num;i++){
if(num%i==0){
break;
}
}
if(i==num){
return true;
}
else{
return false;
}
}
isPrime(10000);
上面的代码可以先将按钮都显示出来,然后后台执行worker。
-------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<div id="msg"></div>
<script>
var w=new Worker("js/prime1.js");
w.onmessage=function(e){
var msg=document.getElementById('msg');
msg.innerHTML=e.data;
}
</script>
<button>按钮2</button>
</body>
</html>
function isPrime(num){
var start=new Date().getTime();
do{
var end=new Date().getTime();
}while(end-start<3000);
for(var i=2;i<num;i++){
if(num%i==0){
break;
}
}
if(i==num){
return true;
}
else{
return false;
}
}
isPrime(10000);
postMessage('ha');
上面代码带一些数据输入输出。(Worker->UI)
--------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="number" id="input">
<button id="btn_qr">开始计算累加和</button>
<div id="result">
</div>
<script>
//UI->worker
function getId(id){
return document.getElementById(id);
}
btn_qr.onclick=function(){
var val=getId('input').value;
var w=new Worker("js/comp.js");//worker
w.postMessage(val);
}
</script>
</body>
</html>
onmessage=function(e){
var val=parseInt(e.data);
console.log(getSum(val));
}
function getSum(num){
var sum=0;
for(var i=1;i<=num;i++){
sum+=i;
}
return sum;
}
上面代码带一些数据输入输出。(UI->Worker)
--------------------------------------------------------------
注:js中有DOM/BOM不能使用Woker。