创建一个worker 对象并向它传递将在新线程中执行的脚本的URl
<!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>递归</title>
</head>
<body>
<input type="text" id="number">
<button id="btn">计算</button>
<script>
let input = document.getElementById('number')
document.getElementById('btn').onclick = function (){
let number = input.value
// 创建一个worker 对象并向它传递将在新线程中执行的脚本的URl
let worker = new Worker('./worker.js')
// 接收worker 传过来的数据函数
worker.onmessage = function (event) {
console.log('主线程接收分线程返回的数据', event.data)
alert(event.data)
}
// 向分线程发送信息
worker.postMessage(number)
console.log('主线程向分线程发送数据请求' + number)
}
</script>
</body>
</html>
新线程
function countNum(n) {
return n <= 2 ? 1 : countNum(n - 1) + countNum(n - 2) //----->递归调用
}
// 只能用函数表达式
var onmessage = function (event){
var number = event.data
// 通过event.data获得发送来的数据
var result = countNum(number)
// 返回数据给主线程
postMessage(result)
console.log('分线程返回数据给主线程' + result)
}
Workers 是html5提供的一个JavaScript多线程解决方案
-
我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面
-
但是主线程完全受主线程控制,且不得操作DOM。
-
所以,这个新标准并没有改变JavaScript单线程的本质
-
Worker:构造函数,加载分线程执行的js文件
-
Worker.prototype.onmessage:用于接收另外一个线程的回调函数
-
Worker.prototype.postMessage:向另一个现场发送消息
不足
worker内代码不能操作DOM(更新UI)
不能跨域加载JS
不是每个浏览器都支持这个新特性