本文介绍了一个简单的 WebWorker 应用案例，演示了如何在主线程与 Worker 线程间传递消息，并展示了基本的错误处理方式。
web worker的小例子，用来入门很合适，建议启动服务来开发。可以使用node的anywhere。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
ddd
</body>
<script src="./index.js"></script>
</html>
index.js
// 实例化 Worker 对象，其实质为新创建的工作线程在主线程的引用
var worker = new Worker("task.js")
// postMessage 方法与新创建的工作线程通信
worker.postMessage({
id: 1,
msg: 'Hello World'
});
// 当 Worker 线程返回数据时，onmessage 回调函数执行
worker.onmessage = function (message) {
var data = message.data;
console.log(JSON.stringify(data))
// terminate 方法终止 worker 线程的运行
worker.terminate()
};
// 当 Worker 线程出错时，onerror 回调函数执行
// error 参数中封装了错误对象的文件名、出错行号和具体错误信息
worker.onerror = function (error) {
console.log(error.filename, error.lineno, error.message)
}
task.js
onmessage = function (message) {
var data = message.data
console.log(data)
data.msg = 'Hi from task.js'
postMessage(data)
}
这是web worker的工作原理
扫一扫
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
