把复杂业务逻辑放在分线程里面或者异步任务里面.解决代码阻塞。
1 在主线程里面创建分线程对象
2 在主线程里发送消息 w.postMessage()
3 在分线程监听onmessage事件,在时间函数通过ev.data获取数据
4 在分线程发出结果,通过postMessage()发消息给主线程
5 在主线程接收数据 w.onmessage事件,在事件函数通过ev.data获取数据
下面是一个webwork案例
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
text-align: center;
}
table{
margin: 0 auto;
border: 1px solid #000;
border-collapse: collapse;
margin-top: 30px;
}
td{
border: 1px solid #000;
padding: 10px 50px;
}
button{
background-color: red;
border: none;
color: white;
border-radius: 5px;
padding: 10px 50px;
}
</style>
</head>
<body>
<button id="b1">停止</button>
<p>正在计算中</p>
<table>
</table>
<script src="../../../资源/jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
主线程
index.js
var i = 1//计算i值的斐波那契数值
var w = new Worker("work.js")
// 在分线程计算对应i的斐波那契数值
w.postMessage(i)
doWork()
//把分线程返回的数据返回出去给主线程
function getMessage(){
return new Promise((resolve,reject)=>{
let callback = function(ev){
w.removeEventListener("message",callback)
w.addEventListener("message",callback)
resolve(ev)//把分线程返回的数据返回出去给主线程
}
w.addEventListener("message",callback)
})
}
// ms设置显示的延迟时间
function getTime(ms){
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(ms+"ms时间到了")
},ms);
})
}
function doWork(){
// 显示时间 斐波那契数值
var t= getTime(1000)
var d = getMessage()
Promise.all([t,d]).then(res=>{
// ["1000ms时间到了",ev]
// 渲染到页面dom
$(`<tr>
<td>第${i}项</td>
<td>${res[1].data}</td>
<td>${res[0]}</td>
</tr>`).appendTo("table")
i++
w.postMessage(i)
doWork()
})
}
$("#b1").click(function(){
w.terminate() //终止分线程
$("p").text("已停止")
})
分线程
work.js
function fibo(n) {
if (n < 1) {
return 0
}
if (n <= 2) {
return 1
}
return fibo(n - 1) + fibo(n - 2)
}
// 3 在分线程向主线程拿数据
// 在分线程里面监听onmessage事件,接受主线程传递的数据,在事件函数里面通过事件句柄.data可以获取传递过来的数据
onmessage = function(ev){
// console.log(ev.data);
var result = fibo(ev.data)
postMessage(result)
}